Next.js - Environment Setup

Next.js - Environment Setup

Setting up a Next.js development environment is straightforward. Since Next.js builds upon React and Node.js, you’ll need Node.js installed on your system.

1. Install Node.js: Download and install the latest Long-Term Support (LTS) version of Node.js from the official website (https://nodejs.org/). This will also install npm (Node Package Manager) or yarn if you prefer that package manager.

2. Verify Installation: Open your terminal or command prompt and run:

node -v
npm -v

These commands should output the installed versions of Node.js and npm, respectively.

Create a New Next.js Application

The recommended way to create a new Next.js app is using the official create-next-app CLI tool. Open your terminal, navigate to the directory where you want to create your project, and run:

npx create-next-app@latest my-nextjs-app

(Replace my-nextjs-app with your desired project name).

The installer will ask you a few questions to configure your project, such as whether to use TypeScript, ESLint, Tailwind CSS, the src/ directory, and the App Router (recommended) or Pages Router. Choose the options that best suit your needs. For beginners, accepting the defaults is a good starting point.

Example prompts during installation (may vary slightly with updates):

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router (recommended)? … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /path/to/your/projects/my-nextjs-app.
...

Once the installation is complete, navigate into your new project directory:

cd my-nextjs-app

Inside the project, you’ll find a standard structure including:

• app/ or pages/: Contains your application’s routes and components (depending on whether you chose App Router or Pages Router).
• public/: For static assets like images and fonts.
• package.json: Lists project dependencies and scripts.
• next.config.js: Configuration file for Next.js (optional, created if needed).

The package.json file will already include the necessary dependencies (next, react, react-dom) and scripts.

Key Scripts in package.json

Your package.json file will contain scripts like these:

"scripts": {
  "dev": "next dev",       // Starts the development server
  "build": "next build",   // Builds the application for production
  "start": "next start",   // Starts the production server (after building)
  "lint": "next lint"      // Runs ESLint (if configured)
}

Start the Development Server

To start the development server, run the following command in your project directory:

npm run dev

(Or yarn dev if you prefer Yarn).

You should see output indicating the server has started, typically on port 3000:

# Example Output:
# - ready started server on 0.0.0.0:3000, url: http://localhost:3000
# - event compiled client and server successfully in 245 ms (18 modules)

Verify Output

Open your web browser and navigate to http://localhost:3000. You should see the default Next.js starter page, confirming your environment is set up correctly and your application is running.