Project Setup and the Toolchain

The idea in one sentence

Getting productive in Next.js is mostly about one command to scaffold, one command to run, and knowing which files the framework treats as conventions rather than plain code.

Scaffold and run

Create a project and start it with two commands:

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

create-next-app asks whether to use the recommended defaults — TypeScript, ESLint, Tailwind CSS, the App Router, and an AGENTS.md file — or to customize. Taking the defaults is the fastest path and matches everything in this course.

The scripts in package.json are the ones you will run daily:

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

next dev runs the local development server with hot reloading; next build produces the optimized production output; next start serves that build.

Turbopack is the default bundler

As of Next.js 16, Turbopack is the default bundler for both next dev and next build — you do not opt in, it is simply what runs. It is Next.js’s Rust-based successor to webpack, built for fast cold starts and incremental updates.

You configure it, when you need to, through a top-level turbopack key in the config file:

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  turbopack: {
    // Turbopack-specific options go here
  },
};

export default nextConfig;

TypeScript and reading the conventions

Next.js has first-class TypeScript support: the config file itself is next.config.ts, typed with NextConfig, and the framework generates a next-env.d.ts you should not edit. TypeScript is on by default with the recommended setup.

The habit that makes Next.js click is learning to read its conventions. A handful of names are reserved and meaningful anywhere under app/:

Filenames like page, layout, loading, error, and route are behavior, not arbitrary modules.
A folder is a route segment; wrapping a folder name in brackets, as in [slug], makes it dynamic.
next.config.ts is the one place to change framework-level behavior.

Once you can look at a tree and predict the URLs and where code runs, the framework stops feeling magical:

my-app/
  app/
    layout.tsx
    page.tsx
  public/            # static assets served as-is
  next.config.ts     # framework configuration
  tsconfig.json      # TypeScript configuration

flowchart LR
  Create[create-next-app] --> Tree[app/ structure]
  Tree --> Dev[next dev]
  Dev --> Turbo[Turbopack bundles]
  Turbo --> Browser[Live app in the browser]
  Config[next.config.ts] --> Turbo

From scaffold to a running dev server