Installing Next.js (create-next-app)

Scaffold a new Next.js project using create-next-app and understand every setup prompt it asks.

Creating a Project

The official way to start a new Next.js project is the create-next-app command-line tool, which scaffolds a working project with sensible defaults.

npx create-next-app@latest my-app
cd my-app
npm run dev

This downloads the latest create-next-app, walks you through a short setup, and generates a ready-to-run project in a my-app folder.

Prompt	Recommended Answer	Why
TypeScript?	Your choice — No for this course	This course teaches in plain JavaScript first; TypeScript is covered in a later lesson.
ESLint?	Yes	Catches common mistakes early, at no ongoing cost.
Tailwind CSS?	Your choice	Optional utility-first styling — not required to follow this course.
`src/` directory?	Your choice	Moves app/ inside src/ for organization; functionally identical either way.
App Router?	Yes	This course teaches the modern App Router, the current default.
Import alias?	Keep the default (@/*)	Lets you import with @/components/... instead of relative ../../ paths.

Once scaffolding finishes, start the development server and open the printed URL in your browser.

npm run dev
# ▲ Next.js 14.x
# - Local:   http://localhost:3000

Browser Result

Click Run to see what this code prints.

Fast Refresh

Edit app/page.tsx and save — the browser updates instantly without losing component state. This is Fast Refresh, and it's on by default.

Running `npm run start` without building first

The start script serves the production build in the .next folder — you must run npm run build at least once before it, or it will fail.

Editing files inside `.next/`

That folder is generated output, rebuilt on every run — any edits there are lost immediately.

Yes — create-next-app detects and works with yarn, pnpm, and bun as well as npm.

Port 3000 by default. If it's taken, Next.js automatically tries 3001, 3002, and so on.

You now have a running Next.js project. Next, you'll take a tour of the folders and files it generated and what each one is responsible for.