Anatomy of a Next.js project

lesson 2-1 · ~10 min · 4/29

Quiz

Warm-up from 'Rendering on the server: the big idea': what does hydration do to a server-rendered page?

Your first tour

Before frameworks, starting a React project that also had a server meant hours of setup — a bundler, a dev server, routing, two configs that drift apart — and every team did it differently, so joining a new codebase meant relearning the layout. Next.js removes both costs: one scaffold command, one folder convention that every Next.js project on earth shares. Learn this layout once and you can navigate any Next.js repo at work.

You scaffold a Next.js app with one command, just like the Express generators you met in Backend with Node.js:

npx create-next-app@latest my-app

The result is a normal Node project (there is a package.json, and npm run dev starts it) with one special folder at its heart:

my-app/
├── app/
│   ├── layout.js      ← wraps every page (html, body)
│   ├── page.js        ← the / homepage
│   └── globals.css
├── public/            ← static files served as-is
├── next.config.js     ← framework settings
└── package.json

Everything routing-related lives in app/. That folder is your sitemap.

Walk through creating and starting a Next.js app. Run each command and read what it prints — this is the exact loop you will use on day one of any Next.js job.

Step 1/3: Scaffold a new project. The wizard asks a few questions (TypeScript? Tailwind?) — the defaults are fine while learning.

The special file names

Inside app/, Next.js only treats a handful of file names as special. Everything else (components, helpers) is just code you import.

File	Job
`page.js`	The UI for a URL. A folder without one is not a page
`layout.js`	Shared shell wrapped around pages below it
`loading.js`	Instant fallback while a page loads (Unit 4)
`error.js`	Shown when a page throws (Unit 4)
`not-found.js`	Shown for missing content (Unit 5)
`route.js`	An API endpoint instead of a page (Unit 6)

Memorize the first two now. The rest each get their own lesson later.

Quiz

You create the folder app/pricing/ containing only a file called helpers.js. What happens at the URL /pricing?