Next.js Foundations and Project SetupLesson 1.2

How to scaffold a Next.js project with create-next-app

create-next-app CLI, project structure, app directory, layout.tsx, page.tsx, tsconfig, package.json scripts

Scaffolding Your Project

The fastest way to start is the official CLI. Run this in your terminal:

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

The --app flag opts into the App Router. The --typescript flag adds TypeScript. After scaffolding, open http://localhost:3000 - you have a running Next.js app.

Understanding the Generated Structure

Focus on three files first:

app/
  layout.tsx   ← Root layout, wraps every page
  page.tsx     ← The / route
  globals.css  ← Global styles

layout.tsx is the persistent shell of your app - navigation, fonts, and providers go here. page.tsx is the content for the / route. Any folder you create inside app/ with its own page.tsx becomes a new route.

Key npm Scripts

npm run dev    # Start dev server with hot reload
npm run build  # Production build
npm run start  # Start production server
npm run lint   # Run ESLint

The dev server watches for file changes and reloads instantly. The build command compiles, optimizes, and statically generates pages where possible. Always run build before deploying - it catches type errors and invalid configurations that dev mode silently ignores.