How to Install Next.js and Set Up Your First Project

Every Next.js journey begins with a single command: create-next-app. Unlike older workflows where developers manually configured Webpack, Babel, routing, and linting, Next.js ships an official scaffolding tool that generates a fully working project in under a minute, pre-configured with sensible defaults.

But running the command is only half the story. The setup wizard asks several questions — TypeScript or JavaScript, ESLint or not, Tailwind CSS or not, App Router or Pages Router, src directory or not, import alias or not — and each answer shapes how your project is structured going forward. Understanding what each choice means, rather than blindly hitting enter, will save you confusion later.

This lesson walks through installing Node.js prerequisites, running create-next-app, understanding every prompt, and starting your local development server for the first time.

Learning Objectives

• Install the prerequisites needed to run Next.js locally.
• Use create-next-app to scaffold a new Next.js project.
• Understand the meaning of each setup prompt, including TypeScript and App Router.
• Run and view a Next.js project using the local development server.
• Identify the key files generated by create-next-app.

Core Definitions

• Node.js: A JavaScript runtime required to run Next.js's build tools and development server on your machine.
• npm/npx: Node's package manager (npm) and package runner (npx), used to install and run tools like create-next-app without permanently installing them globally.
• create-next-app: The official Next.js scaffolding CLI tool that generates a new, pre-configured Next.js project.
• TypeScript: A typed superset of JavaScript that Next.js supports natively, catching type-related errors during development.
• ESLint: A tool that analyzes code for potential errors and style issues; create-next-app can configure it automatically.
• App Router: The modern Next.js routing system based on the app/ directory, supporting Server Components by default.
• Development server: A local server (started with npm run dev) that serves your Next.js app with hot-reloading during development.

Detailed Explanation

Before installing Next.js, your machine needs Node.js, since Next.js's tooling — the dev server, build system, and package manager — all run on Node. Node.js version 18.18 or later is required for current Next.js versions. You can check your installed version by running `node -v` in a terminal.

Once Node.js is available, creating a Next.js project doesn't require installing anything permanently upfront. Running `npx create-next-app@latest` downloads and executes the latest scaffolding tool temporarily, asks you a series of setup questions, and generates a working project folder based on your answers.

Each prompt matters. Choosing TypeScript sets up .tsx files and a tsconfig.json for type safety — recommended for any project beyond a quick experiment. Choosing ESLint adds automatic code-quality checks. Choosing Tailwind CSS pre-configures utility-first styling. Choosing the App Router (the current default and recommended approach) sets up routing based on the app/ directory with Server Components; the older alternative, the Pages Router, uses a pages/ directory and predates Server Components. The 'src/ directory' option simply moves your app code into a src/ folder to separate it from config files at the project root, a matter of personal organizational preference.

After the wizard finishes, `cd` into the new folder and run `npm run dev` to start the local development server, typically available at http://localhost:3000. Next.js automatically reloads the browser as you edit files, which is what makes the development loop fast.

Diagram Description

Visualize a linear setup flow:

[Install Node.js 18.18+] --> [Open terminal] --> [Run: npx create-next-app@latest my-app] --> [Answer setup prompts: TypeScript? ESLint? Tailwind? App Router? src/ dir? import alias?] --> [cd my-app] --> [Run: npm run dev] --> [Open http://localhost:3000 in browser]

Comparison Table

Setup Prompt	Recommended for Beginners	What It Does
TypeScript?	Yes	Adds type safety and .tsx files; catches errors early
ESLint?	Yes	Flags code quality and style issues automatically
Tailwind CSS?	Yes (optional)	Pre-configures utility-first CSS styling
src/ directory?	Optional	Moves app code into src/ to separate from root configs
App Router?	Yes	Uses the modern app/ directory with Server Components
Import alias (@/*)?	Yes (default)	Enables cleaner imports like @/components instead of ../../components

Next.js Practical Example

# 1. Check Node.js is installed (v18.18 or later required)
node -v

# 2. Scaffold a new Next.js project
npx create-next-app@latest my-first-app

# During setup you'll be asked:
# ✔ Would you like to use TypeScript? … Yes
# ✔ Would you like to use ESLint? … Yes
# ✔ Would you like to use Tailwind CSS? … Yes
# ✔ Would you like your code inside a `src/` directory? … No
# ✔ Would you like to use App Router? (recommended) … Yes
# ✔ Would you like to customize the import alias (@/* by default)? … No

# 3. Move into the project folder
cd my-first-app

# 4. Start the development server
npm run dev

# 5. Open the app in your browser
# http://localhost:3000

This sequence takes you from zero to a running Next.js app. The `npx create-next-app@latest` command downloads the latest scaffolding tool without a permanent global install, so you always get the newest version. After answering the prompts, `npm run dev` starts a local server with hot-reloading — any file you save under app/ is instantly reflected in the browser without a manual refresh, which is what makes the Next.js development experience fast and enjoyable.

Industry Examples

• Freelance developers use create-next-app to spin up client project prototypes in minutes instead of manually configuring Webpack and Babel.
• Startups use the standardized create-next-app scaffold so every new engineer's project structure looks identical, reducing onboarding friction.
• Bootcamps and coding courses standardize on create-next-app with TypeScript and the App Router so students learn on the same current, production-representative setup.
• Agencies building multiple client marketing sites often start every project from create-next-app with Tailwind CSS pre-selected for rapid styling.
• Open-source maintainers frequently distribute 'starter templates' that are just create-next-app scaffolds pre-customized with extra tooling like testing libraries or CMS integrations.

Interview Questions and Answers

Q1. What command is used to create a new Next.js project?

The official command is `npx create-next-app@latest`, optionally followed by a project name. This runs the latest version of the scaffolding tool without permanently installing it, and walks through an interactive setup wizard.

Q2. What is the minimum Node.js version required for modern Next.js projects?

Current versions of Next.js require Node.js 18.18 or later. Running `node -v` in a terminal confirms the installed version before starting a project.

Q3. What is the difference between the App Router and Pages Router during setup?

The App Router is the modern routing system based on the app/ directory, supporting Server Components, layouts, and streaming by default, and is the recommended choice for new projects. The Pages Router is the older system based on the pages/ directory, still supported for legacy projects but not recommended for new ones.

Q4. Why does create-next-app ask about TypeScript during setup?

TypeScript adds static type checking on top of JavaScript, which catches many bugs during development rather than at runtime. Selecting it during setup configures .tsx files and a tsconfig.json automatically, saving manual configuration.

Q5. What command starts the local development server after project creation?

`npm run dev` starts the Next.js development server, typically accessible at http://localhost:3000, with hot-reloading enabled so file changes appear in the browser automatically.

MCQs With Answers

1. Which command scaffolds a new Next.js project?

1. npm init react-app
2. npx create-next-app@latest
3. next new project
4. npm install nextjs

Answer: B. npx create-next-app@latest

Explanation: npx create-next-app@latest is the official command that downloads and runs the current scaffolding tool to generate a new Next.js project.

2. What is the minimum required Node.js version for current Next.js projects?

1. Node.js 10
2. Node.js 14
3. Node.js 18.18 or later
4. Any version works

Answer: C. Node.js 18.18 or later

Explanation: Modern Next.js versions require Node.js 18.18 or later; older Node versions are not supported.

3. Which command starts the local development server?

1. npm start
2. npm run build
3. npm run dev
4. npm run serve

Answer: C. npm run dev

Explanation: npm run dev starts the Next.js development server with hot-reloading, typically on http://localhost:3000.

4. Choosing the App Router during setup means your project will primarily use:

1. The pages/ directory
2. The app/ directory with Server Components
3. No routing at all
4. A separate router library

Answer: B. The app/ directory with Server Components

Explanation: The App Router is based on the app/ directory and supports Server Components, layouts, and streaming by default, and is the current recommended routing system.

5. What does selecting TypeScript in the setup wizard configure?

1. A CSS preprocessor
2. .tsx files and a tsconfig.json for type safety
3. A database connection
4. A testing framework

Answer: B. .tsx files and a tsconfig.json for type safety

Explanation: Selecting TypeScript sets up .tsx file support and a tsconfig.json, enabling static type checking throughout the project.

Common Mistakes to Avoid

• Trying to run create-next-app without Node.js installed, resulting in 'command not found' errors.
• Using an outdated Node.js version and hitting compatibility errors during installation.
• Selecting the Pages Router out of habit from old tutorials instead of the recommended App Router for new projects.
• Forgetting to `cd` into the newly created project folder before running npm run dev.
• Confusing npm run dev (development server) with npm run build (production build) and npm run start (running a production build).

Interview Notes

• create-next-app is the official Next.js project scaffolding CLI, run via npx.
• Node.js 18.18+ is required to run current Next.js tooling.
• The setup wizard's key choices are: TypeScript, ESLint, Tailwind CSS, src/ directory, App Router vs Pages Router, and import alias.
• npm run dev starts the local development server with hot-reloading, typically at localhost:3000.
• The App Router (app/ directory) is the current recommended routing approach; the Pages Router (pages/ directory) is the legacy alternative.

Key Takeaways

• Installing Next.js is a guided, one-command process thanks to create-next-app, but each setup prompt has real consequences for project structure.
• TypeScript and the App Router are the recommended defaults for new projects in the current Next.js ecosystem.
• npm run dev is the command you'll use constantly throughout development for instant local feedback.
• Understanding what each scaffolding choice means avoids confusion later when navigating the generated file structure.

Summary

Setting up a Next.js project starts with ensuring Node.js 18.18 or later is installed, then running `npx create-next-app@latest` to launch an interactive setup wizard. Each prompt — TypeScript, ESLint, Tailwind CSS, src/ directory, App Router, and import alias — shapes the generated project structure, with TypeScript and the App Router being the recommended defaults for new projects. Once scaffolding completes, `npm run dev` starts a local development server with hot-reloading, giving you a working Next.js app in your browser within minutes.