Getting Started with Next.js

In this chapter you will create a Next.js project, start the development server, edit your first page and add a second one. We will also set up the editor so it catches mistakes early. This guide uses the App Router, which lives in the app directory. The older pages directory (the Pages Router) is still supported, but the App Router is the recommended choice for new projects.

Prerequisites

Next.js runs on Node.js. Installing the current LTS release from nodejs.org is the safest choice. Each Next.js release declares a minimum Node.js version, so if your Node.js is old, check the requirements in the official installation guide. You can use npm, which ships with Node.js, or pnpm, Yarn or Bun.

node --version
npm --version

Create a project with create-next-app

The quickest way to start is the official scaffolding tool, create-next-app. It installs the required packages and writes sensible configuration files.

npx create-next-app@latest my-app

# or with another package manager
pnpm create next-app my-app
yarn create next-app my-app
bun create next-app my-app

The tool asks a few questions. Accepting the recommended defaults gives you TypeScript, a linter (ESLint), Tailwind CSS, the App Router and the @/* import alias. If you customize, you will be asked about the following; the exact prompts can vary between releases.

• Whether to use TypeScript
• Which linter to use (ESLint, Biome or none)
• Whether to use Tailwind CSS
• Whether to put your code in a src/ directory
• Whether to use the App Router (recommended)
• The import alias (@/* by default)

If you are new to Next.js, stick with the defaults. You can add TypeScript later, but enabling it from the start means your editor checks component props and data shapes for you.

Run the development server

Move into the project folder and start the dev server:

cd my-app
npm run dev

Open http://localhost:3000 and you will see the starter page. The dev server rebuilds only what changed whenever you save, and Fast Refresh updates the page while preserving component state where it can. Recent releases use Turbopack, a bundler written in Rust, for the dev server by default.

Your package.json contains scripts like these:

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

dev starts the development server, creates a production build, and serves that build. To use another port, pass , for example .