#Installation, CLI & Your First Project¶

Prerequisites¶

Tool	Version
Node.js	20.9+ (LTS recommended)
Package manager	npm 10+, pnpm 9+, yarn 4+, or bun 1.1+
Git	Any recent version

Verify:

bash

2 lines

1node --version   # v20.9.0 or later
2npm --version    # 10+

Creating a Project¶

The fastest way:

bash

1 line

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

The CLI asks a handful of questions. The Next.js 16 defaults:

✔ 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?     › Yes
✔ Would you like to customize the default import alias (@/*)? › No
✔ Use Turbopack? (now default)          › Yes

Tip: Pass --use-pnpm (or --use-bun) to skip the prompt and avoid creating a stray package-lock.json.

The Dev Server¶

bash

2 lines

1cd my-app
2npm run dev

You should see:

   ▲ Next.js 16.0.0  (Turbopack)
   - Local:        http://localhost:3000
   - Environments: .env.local

 ✓ Ready in 480ms

Open http://localhost:3000. Edit app/page.tsx — the browser updates in well under 100 ms.

The Five Commands You'll Run Daily¶

Command	What it does
`next dev`	Turbopack dev server with HMR
`next build`	Production build (Turbopack)
`next start`	Runs the production build
`next lint`	ESLint with the Next preset
`next info`	Diagnostic dump for bug reports

Project Layout (Default)¶

my-app/
  app/
    layout.tsx       ← Root layout (must export <html><body>)
    page.tsx         ← Home route (/)
    globals.css      ← Tailwind directives & global styles
    favicon.ico
  public/            ← Static files served from /
  next.config.ts     ← Configuration (TypeScript!)
  tsconfig.json
  package.json

Common First-Day Mistakes¶

1Editing node_modules — never works; reinstall instead.
2Importing from pages/ — App Router uses app/. Don't mix unless intentional.
3Restarting the dev server after every change — HMR handles 99% of edits. Only restart on config changes.
4Forgetting "use client" — adding state/effects to a Server Component throws an error. Add the directive at the top.

Quick Smoke Test¶

Replace app/page.tsx with:

tsx

8 lines

1export default function HomePage() {
2  return (
3    <main className="p-12">
4      <h1 className="text-4xl font-bold">Hello, Next.js 16!</h1>
5      <p className="mt-2 text-gray-600">If you see this, you're ready.</p>
6    </main>
7  );
8}

Save. The page updates. You're set. ✅