Project Setup & the Current Next.js Baseline
Website Rebuild with Next.js
Chapter 1 · Project Setup & the Current Next.js Baseline
This is the foundational course in the six-course Website Rebuild series — the same learning-blog site, rebuilt from scratch in a genuinely different framework each time. Django, Laravel, Rails, Astro, and Express are all already complete, and every one of them explicitly mirrors this course's own chapter structure and its core requirement: real, arbitrary-depth URL routing that mirrors the site's own content/ folder tree, rather than a fixed three-level subject/subtopic/page shape.
Scaffolding the Project
The interactive prompts matter less than they once did — the App Router is now the stable, standard choice (the older Pages Router is in maintenance mode), and TypeScript is the obvious answer for a project this size. Accept both. There's no Turbopack prompt to answer at all anymore, for a reason covered next.
Turbopack by Default
--turbopack flag on both next dev and next build to opt in. As of Next.js 16, Turbopack is stable and used by default for both commands — a freshly scaffolded package.json's dev/build scripts are just next dev and next build, no flag needed. Webpack is still available as an explicit opt-out (next build --webpack) for projects with a custom Webpack config, but that's not a path this course takes.
An Honest Starting Position: No Built-In ORM, No Built-In Auth
A freshly scaffolded Next.js project has no database layer and no authentication mechanism — nothing opinionated about either. That's not a gap to apologize for; it's a genuinely different starting philosophy from three of this course's own siblings, and it shapes real decisions later in this course: Chapter 2 reaches for Prisma precisely because nothing comes built in, and Chapter 9 has a real, honest decision to make about which authentication library to build on, covered when that chapter arrives rather than here.
Six Frameworks, Compared Honestly
| Next.js | Django | Laravel | Rails | Astro | Express | |
|---|---|---|---|---|---|---|
| Built-in ORM? | No | Yes | Yes | Yes | No | No |
| Built-in auth? | No | Yes | Yes | Yes | No | No |
| Built-in routing convention? | Yes (file-based) | Yes | Yes | Yes | Yes (file-based) | No — hand-wired |
| Backend philosophy | Bring your own | Batteries included | Batteries included | Batteries included | Bring your own | Bring your own — most minimal in the series |
Express turns out to be the most architecturally bare of all six once its own rebuild course actually gets underway — no ORM, no routing convention, no rendering engine either. Next.js and Astro share the same "bring your own backend" starting point as each other, but both still give you file-based routing for free, which is the one piece Express hand-wires from scratch.
Current Baseline: Versions & Requirements
| Requirement | Version / detail |
|---|---|
| Next.js | 16.3.x (current stable as of this chapter's own writing) |
| Node.js | 20.9.0 or later — Node 18 is no longer supported |
| TypeScript | 5.1.0 or later |
| React | 19.2 (a Canary release, bundled with the App Router — includes View Transitions, useEffectEvent, and Activity, none of which this routing-and-content-focused course needs directly) |
None of this needs installing by hand — create-next-app@latest already pulls in a compatible set. It's listed here so a version mismatch is recognizable on sight later, rather than mistaken for a real bug.
Coming in Chapter 2
Page model are designed starting in Chapter 2, alongside the same tree-representation comparison every sibling course in this series has independently worked through — this chapter's own job is only to establish the project's real starting shape.
Hands-On Exercises
Scaffold a new Next.js project via npx create-next-app@latest, choosing the App Router and TypeScript, and confirm the default starter page runs correctly in the dev server.
Run node --version and confirm it meets Next.js 16's own 20.9.0-or-later minimum, then run npm run dev and identify, from the terminal output, the confirmation that Turbopack is being used without having passed any flag for it.
Inspect the freshly scaffolded project's package.json and confirm no ORM or authentication package is present anywhere in its dependencies — then explain, in your own words, what a fresh Django or Rails project's own default dependency list would already include that this one doesn't.
Chapter 1 Quick Reference
npx create-next-app@latest— scaffolds the project (App Router, TypeScript)- Turbopack is on by default in Next.js 16 for both
next devandnext build— no flag needed - No built-in ORM or auth — Next.js's own "bring your own backend" philosophy, shared with Astro and (even more minimally) Express
- Baseline: Next.js 16.3.x, Node 20.9+, TypeScript 5.1+, React 19.2
- Not yet configured — the database layer starts in Chapter 2
- Next chapter: Designing a Flexible URL & Content Model