Skip to content
Next.js: From First Principles to Production
Learn Next.js from its core concepts, build Signalboard one working feature at a time, and take the same application through data, mutations, caching, security, testing, deployment, and operations.
Learn the framework by building with it
You do not need prior Next.js experience. Module 1 creates the project and teaches pages, layouts, navigation, assets, and the production build. Every later lesson defines one concept, runs complete code, explains what to observe, gives you a change to make, and then connects it to production behavior.
What you will own
You will build Signalboard, a multi-tenant incident and release coordination system with public and authenticated surfaces, tenant-scoped roles, URL state, transactions, uploads, signed webhooks, deliberate caching, audit history, tests, accessibility, observability, deployment, rollback, and an incident review.
Tested technical baseline
The release baseline is Next.js 16.3.0, React 19.x, TypeScript 5.9.x, Node.js >=20, PostgreSQL 17, and Bun 1.x. Framework claims were reviewed on 2026-08-30; unstable behavior is linked to first-party documentation and must be rechecked when the baseline changes.
Eight modules, one production path
The recommended pace is one module per week, roughly 5–7 hours, for 45–55 hours total. Follow the order for a complete build or jump to a specific production problem and return to its dependencies.
Build Your First Next.js App
Create Signalboard, understand the App Router file conventions, build shared UI, navigate without full reloads, and prove the production build.
Understand Server and Client Components
Learn where components execute, what crosses the React Server Component boundary, and how to add browser interactivity without moving the application into the client bundle.
Route a Real Product
Turn product URLs into an intentional route tree with dynamic segments, URL state, nested layouts, metadata, and local loading and failure boundaries.
Fetch and Display Data
Read data in Server Components, choose API or database boundaries, remove waterfalls, stream slow regions, and expose only bounded projections.
Change Data with Forms and Actions
Use forms and Server Actions for mutations, show validation and pending state, authorize every call, and build Route Handlers for machine-facing boundaries.
Control Rendering and Caching
Choose static or request-time work deliberately, introduce Cache Components one primitive at a time, and make freshness and invalidation observable.
Secure, Test, and Tune the App
Protect server boundaries, test the risks at the right level, make the interface accessible, and measure bundles and user-facing performance.
Deploy and Operate Next.js
Build reproducible releases, choose a deployment target, validate environments and migrations, instrument requests, and practice rollback and incident recovery.
The evidence you keep
Your operating packet accumulates a server-client boundary map, route map, data-access policy, mutation policy, cache map, threat model, test strategy, performance budget, deployment runbook, observability plan, architecture decisions, rollback procedure, and incident postmortem. The final defense requires you to connect each claim to actual repository evidence.
How assessment works
Every module check presents five scenarios. Four architecture reviews connect decisions across boundaries. The final operational-defense bank contains twenty scenarios and presents twelve per attempt. Questions test prediction, diagnosis, and trade-offs—not syntax recall.