Next.js Installation & Setup

Setting up a Next.js application is straightforward. The Next.js team provides a powerful CLI tool calledcreate-next-app that bootstraps a complete Next.js application for you, complete with TypeScript, Tailwind CSS, and ESLint configurations if you prefer.

System Requirements

Before installing Next.js, ensure your environment meets the following requirements:

• Node.js 18.17 or later.
• Windows, macOS, or Linux operating systems.
• A package manager like npm, yarn, pnpm, or bun.

Installing via create-next-app

The recommended way to start a new Next.js project is by using create-next-app. Open your terminal and run the following command:

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

During the installation, you will be prompted with the following configuration options:

What is your project named? my-next-app 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

We highly recommend:

• Selecting Yes for App Router (latest standards).
• Selecting Yes for Tailwind CSS if you want fast styling.
• Selecting Yes for the `src/` directory to keep your root directory clean.

Manual Installation

If you prefer setting up a custom project without the generator, you can install the packages manually.

First, initialize your project and install the dependencies:

npm install next react react-dom

Then, open your package.json file and add the required scripts:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

Running the Development Server

Whether you used create-next-app or the manual format, navigate to your project directory and start the server:

cd my-next-app
npm run dev

By default, this will start your development server on http://localhost:3000. Open this URL in your browser, and you should see your newly initialized Next.js application running!

What Next?

Now that you have your Next.js project actively running, the next crucial step is understanding how these files and folders are structured. In the next section, we will analyze the Next.js project architecture.