Creating a Next.js Project

The fastest way to start a Next.js project is the create-next-app CLI. It doesn't just drop in a few files — it wires up TypeScript, a linter, and the App Router folder structure so you're writing application code within minutes instead of configuring a bundler.

Scaffolding a project

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

The CLI asks a handful of questions — TypeScript, ESLint, Tailwind CSS, whether to use a src/ directory, and the import alias (@/* by default). Once it finishes, npm run dev starts a local dev server, by default at http://localhost:3000, using Turbopack (Next.js's Rust-based bundler, the default dev server since Next.js 15+).

What you get

A default project looks roughly like this:

my-app/
├── app/
│   ├── layout.tsx      # Root layout — wraps every page
│   ├── page.tsx        # The "/" route
│   └── globals.css
├── public/              # Static files served as-is (/logo.png, etc.)
├── next.config.ts       # Framework configuration
├── tsconfig.json
└── package.json

The app/ directory is where routing happens — you'll spend most of this course inside it. public/ is for anything you want served at a fixed URL without processing, like favicon.ico or a downloadable PDF.

The scripts that matter

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

next dev is for local development — fast refresh, unminified errors, no caching of your own code. next build compiles an optimized production bundle and statically renders whatever pages it can ahead of time. next start then runs that build as a production Node.js server. You'll only see the real performance characteristics of a Next.js app after running build — dev intentionally trades speed for developer feedback.

A minimal starting page

Everything in app/page.tsx is a React Server Component by default — no special import needed:

export default function Home() {
  return (
    <main>
      <h1>Hello, Next.js</h1>
    </main>
  );
}

Save the file while next dev is running and the browser updates instantly — no manual refresh, and component state is preserved where possible. From here, every new route you add is just a new folder inside app/, which is exactly what the next lesson covers.