Create a Next.js app, understand the folders and files it gives you, and run the dev, build, and start commands.
Why: this one command scaffolds a complete Next.js app — folders, config, and a working page — so you never start from a blank directory. Note: "scaffold" just means it generates the starter files for you.
$ pnpm create next-app@latest my-app --yesThe flag --yes accepts the default options. This creates a folder called my-app with a ready-to-run project inside.
Why: "dev" runs a local server that reloads as you edit.
$ cd my-app$ pnpm devWhy: Next.js uses file-system routing — the shape of your folders IS your URL structure, so knowing what each top-level folder is for tells you where code goes. Note: "routing" means matching a URL to the code that renders it.
my-app/
├─ app/ # your routes live here — each folder is a URL segment
│ ├─ layout.tsx # shared shell wrapped around every page (required)
│ ├─ page.tsx # the UI for "/" (the home page)
│ └─ globals.css # global styles
├─ public/ # static files served as-is, e.g. /logo.png
├─ next.config.ts # Next.js configuration
├─ package.json # dependencies and the dev/build/start scripts
└─ tsconfig.json # TypeScript settingsWhy: a page is just a file named page.tsx that default-exports a React component. The file’s folder decides its URL — app/page.tsx is "/", app/about/page.tsx is "/about". No router config to wire up.
// app/page.tsx -> served at "/"
export default function Page() {
return <h1>Hello Next.js!</h1>
}// app/about/page.tsx -> served at "/about"
export default function AboutPage() {
return <h1>About us</h1>
}Why: real apps pull in libraries. Use your package manager to add (or remove) them; the -D flag marks a package as a dev-only tool (like a linter) that is not shipped to users.
$ pnpm add zod$ pnpm add -D vitest$ pnpm remove zod