Mastering Terminal Commands for React and Next.js Projects 🚀👨‍💻

Hey there, fellow dev! 👋

Hope you’re doing great! Today, we’re diving into something every React and Next.js developer relies on—the terminal. Whether you’re setting up a project, adding dependencies, or debugging issues, mastering terminal commands is key to a smooth workflow. 🖥️

In this post, I’ll share 50+ essential commands that’ll supercharge your React and Next.js development. From creating projects to handling errors and speeding up your process, we’ve got it all covered. 🚀

So, grab your coffee ☕ and let’s get started—you’ll be a terminal pro in no time!

🔥 Basic Setup Commands

When starting a new React or Next.js project, there are a few commands that lay the foundation for everything you’ll build.

npx create-react-app ⚛️

npx create-react-app my-app

Creates a new React project with a boilerplate structure.

npx create-next-app ⬇️

npx create-next-app my-next-app

Scaffolds a new Next.js project with automatic routing and SSR (server-side rendering).

🚀 Development Workflow Commands

After setting up, the next steps involve running your project locally for development.

npm start / yarn start 🎬

npm start

Starts the development server for your React project, making it accessible at http://localhost:3000.

npm run dev / yarn dev 🔄

npm run dev

Runs the Next.js development server. It enables hot reloading and fast development workflows.

📦 Package Management

Both React and Next.js projects rely on various npm packages to add functionality.

npm install / yarn install 🛠️

npm install axios

Installs a new dependency (like Axios, in this case) into your project.

npm install --save-dev / yarn add --dev 🛡️

npm install eslint --save-dev

Installs a package that is only required during development (like ESLint, in this example).

✂️ Cleaning and Building Projects

Preparing your project for production is a key phase, and these commands will help clean and build your app.

npm run build / yarn build 🏗️

npm run build

Creates an optimized production build of your React or Next.js project.

npm run clean 🧹

npm run clean

Clears the build folder or any cache generated by the project.

🚦 Linting and Formatting Commands

Keeping your code clean and following best practices is made easier with linters and formatters.

npm run lint / yarn lint 🕵️‍♂️

npm run lint

Checks your project for any linting errors based on your ESLint configuration.

npm run format / yarn format 🖋️

npm run format

Automatically formats your code using tools like Prettier.

🔧 Testing and Debugging Commands

Running tests and debugging issues in your code ensures that you maintain a bug-free codebase.

npm test / yarn test 🧪

npm test

Runs your test suite for React or Next.js using testing frameworks like Jest.

npm run inspect / yarn inspect 🔍

npm run inspect

Opens the Node.js inspector for debugging purposes. Useful for investigating server-side bugs.

⚡ Handling Errors in Terminal

Here are some common errors you may face when running commands in React and Next.js, along with ways to troubleshoot them.

Error: Module not found: Can't resolve 'react' ❗

• Cause: The react package is not installed.
• Fix: Run npm install react to resolve the missing dependency.

Error: Cannot find module 'next' ❌

• Cause: You’re attempting to run Next.js commands without the next package.
• Fix: Install it with npm install next.

Error: Error: ENOSPC: System limit for number of file watchers reached 💻

• Cause: This often happens when there are too many files to watch on your system.
• Fix: Increase the file watcher limit by running:

  echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

📝 Common Git Commands

Version control is a critical part of development, and Git plays a significant role in React and Next.js workflows.

git init 🗂️

git init

Initializes a new Git repository in your project folder.

git add . ➕

git add .

Stages all changes for the next commit.

git commit -m "Commit message" 📩

git commit -m "Initial commit"

Commits your staged changes with a descriptive message.

git push origin main 📤

git push origin main

Pushes your changes to the remote repository on the main branch.

🌐 Popular Next.js Features and Commands

Next.js provides several unique features like static site generation (SSG) and API routes. Here are some helpful commands.

next build 🏗️

next build

Builds your Next.js app for production, including optimizing for SSR and static generation.

next export 📤

next export

Exports your Next.js app as a static HTML site, which can be hosted anywhere.

next lint 🕵️‍♀️

next lint

Runs ESLint against your project with Next.js-specific rules.

📊 Environment Management Commands

Handling environment variables is a crucial part of any development process. Here's how to manage them.

npm run env / yarn env 🌍

npm run env

Displays environment variables used in your project.

.env.local, .env.production 🌱

Environment variables are managed in files like .env.local and .env.production:

NEXT_PUBLIC_API_URL=https://api.example.com

Next.js exposes these variables using the NEXT_PUBLIC prefix for the client-side.

🚀 Deploying Your Project

Deploying a React or Next.js project involves different strategies based on your host or platform.

vercel 🕊️

vercel

Vercel’s CLI command deploys your Next.js project to Vercel, a popular platform for Next.js apps.

npm run deploy 📦

npm run deploy

Custom deploy scripts that may push your React project to services like Firebase or GitHub Pages.

🚀 Command Table for React and Next.js

💡 Additional Tips for Terminal Mastery

• Aliases: You can create shortcuts for commonly used commands by adding aliases to your .bashrc or .zshrc file.

  alias gs='git status'
  alias ga='git add .'
  alias gc='git commit -m'

• Navigating with ease: Get used to cd, ls, and rm commands for quick file navigation and removal. Pair them with tools like fzf (fuzzy finder) for even faster workflows.

• Using .nvm: If you're managing multiple Node.js versions, use nvm (Node Version Manager):

  nvm use 16

👨‍💻 Wrapping Up

Mastering terminal commands

can elevate your React and Next.js development, making your workflow smoother and more efficient. This guide covers a wide range of essential commands, error handling tips, and even deployment strategies. With these tools at your disposal, you'll be able to develop, test, and deploy faster with confidence!

Creating a Simple Calculator with React and Tailwind CSS 💻🧮

Let's walk through how to create a simple calculator app using React and Tailwind CSS, demonstrating how terminal commands come into play during development.

Step 1: Initialize a New React Project

To begin, we’ll use the terminal to create a new React app using create-react-app.

Terminal Command:

npx create-react-app calculator-app

This will scaffold a new React project with all the necessary boilerplate. After it’s done, navigate into your project folder:

cd calculator-app

Step 2: Install Tailwind CSS

Next, we’ll add Tailwind CSS to style our calculator. Tailwind is highly customizable and helps to quickly build responsive UIs.

Terminal Commands:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

This installs Tailwind and PostCSS, and the tailwindcss init command creates a tailwind.config.js file for customization.

Step 3: Configure Tailwind CSS

Now, configure Tailwind by adding it to your src/index.css file. Replace the existing CSS in index.css with:

src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Update the tailwind.config.js file to include the src folder for purging unused CSS.

tailwind.config.js:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 4: Create the Calculator Component

Now, let’s create the basic structure of the calculator in src/App.js.

src/App.js:

import React, { useState } from "react";
 
function App() {
  const [input, setInput] = useState("");
  const [result, setResult] = useState(0);
 
  const handleClick = (value) => {
    setInput(input + value);
  };
 
  const handleClear = () => {
    setInput("");
    setResult(0);
  };
 
  const handleCalculate = () => {
    try {
      setResult(eval(input));
    } catch (error) {
      setResult("Error");
    }
  };
 
  return (
    <div className="flex flex-col items-center justify-center h-screen bg-gray-100">
      <div className="bg-white shadow-lg rounded-lg p-5">
        <h1 className="text-3xl mb-5">Calculator</h1>
        <div className="border border-gray-300 rounded-lg mb-5 p-4 bg-gray-200 text-right">
          <p className="text-xl">{input || 0}</p>
          <p className="text-2xl font-bold">{result}</p>
        </div>
        <div className="grid grid-cols-4 gap-2">
          {["7", "8", "9", "/", "4", "5", "6", "*", "1", "2", "3", "-", ".", "0", "=", "+"].map((symbol) => (
            <button
              key={symbol}
              className="bg-blue-500 text-white rounded-lg p-4 text-xl"
              onClick={() => symbol === "=" ? handleCalculate() : handleClick(symbol)}
            >
              {symbol}
            </button>
          ))}
          <button
            className="col-span-4 bg-red-500 text-white rounded-lg p-4 text-xl"
            onClick={handleClear}
          >
            Clear
          </button>
        </div>
      </div>
    </div>
  );
}
 
export default App;

Here’s a breakdown of the app:

• A stateful input for tracking the user’s input.
• Buttons for digits and operators.
• eval() is used (with caution!) to evaluate the expression.
• A Clear button that resets the state.

Step 5: Run the Development Server

Now that the code is in place, let’s run the app locally to see how it works.

Terminal Command:

npm start

This command starts the development server, and you can now see the calculator live at http://localhost:3000.

Step 6: Tailwind CSS for Styling

Tailwind is used to style the components effortlessly. You’ll notice that the calculator has a clean layout with centered buttons and responsive design, thanks to Tailwind’s utility classes like flex, grid, bg-gray-100, text-xl, etc.

Step 7: Build the Project for Production

Once your app is complete, you can build it for production by running:

Terminal Command:

npm run build

This command bundles the app, optimizing it for deployment.

Final Notes 📝

• Vercel Deployment: For Next.js projects, you can also deploy using vercel CLI.
• Error Handling: If you encounter common errors like Can't resolve 'tailwindcss', reinstall the package using npm install tailwindcss.

By using these terminal commands effectively, you can quickly set up, style, and deploy full-fledged React apps with ease!

• Ashwin sundar