Next.js Mastery Path¶

Mastery Path

BOOTCAMP

VINOD BHANUJA

React gives you components. It does not tell you how a URL becomes a page, where data should be fetched, how HTML gets to the browser before JavaScript does, how a form submission reaches your database, or how the whole thing is built and served in production. Next.js is a framework that answers those questions with a set of conventions — folders become routes, special files become loading and error states, components run on the server by default, and a function marked "use server" becomes an endpoint your form can call. This course teaches those conventions and, more importantly, the machinery underneath them, so you can reason about what your app is doing instead of memorising which file name to use.

The course targets Next.js 16 (the version on npm while it was written was 16.3.6, with React 19.2) and uses the App Router throughout. The older Pages Router appears only where it helps explain a design decision or a migration. Level 1 covers what Next.js adds to React, project structure, file-based routing, layouts, navigation, the Server/Client Component split, styling, images, fonts, metadata and fetching data on the server — ending with a statically generated blog. Level 2 makes the app full-stack: dynamic routes, loading and error UI, Server Actions and forms, caching and revalidation, Route Handlers, Proxy (the file formerly called Middleware), authentication, a real database through an ORM, and URL state — ending with a task manager backed by SQLite. Level 3 goes deep on rendering strategies, streaming, parallel and intercepting routes, internationalisation, SEO, Core Web Vitals, testing and security. Level 4 is about running Next.js for real: deployment on managed platforms and on your own Node server or container, runtimes, monorepos, observability, large-app architecture, upgrades and codemods, accessibility, static export and a production readiness review, finishing with a capstone.

Every lesson has a How It Actually Works section — why a Server Component can await a database but cannot use useState, what the RSC payload is, why a loading.tsx file changes the HTTP status your 404 page returns, how a Server Action is really a POST to an ID the compiler generated, why a revalidatePath call does not rebuild anything until someone visits.

Verified against a real build — and honest about what moves

Code in this course was written for Next.js 16 and the key examples (routing, dynamic routes, metadata, Server Actions with useActionState, Route Handlers, Proxy, Drizzle + SQLite, parallel and intercepting routes, i18n, streaming, Cache Components, Vitest and Playwright tests, standalone output) were compiled with next build and exercised with next start while writing. Terminal output shown on these pages is output we actually observed. Next.js changes quickly — caching in particular was redesigned between versions 14, 15 and 16 — so lessons say which behaviour belongs to which version, and flag anything experimental. When in doubt, the docs bundled with your installed version (node_modules/next/dist/docs/) are the authority.

How the program is organized¶

Level	Focus	Modules
Level 1 · Entry	What Next.js adds, create-next-app, file-based routing & layouts, Link & navigation, Server vs Client Components, styling, images/fonts/metadata, static assets, server-side data fetching	9 topics + 1 project (a statically generated Markdown blog)
Level 2 · Intermediate	Dynamic routes, loading/error/not-found UI, Server Actions & forms, caching & revalidation, Route Handlers, Proxy, authentication, databases with Drizzle, URL state	9 topics + 1 project (a full-stack task manager on SQLite)
Level 3 · Advanced	Rendering strategies & Partial Prerendering, Suspense & streaming, parallel & intercepting routes, i18n, SEO, Core Web Vitals, Vitest & Playwright, security, client-side data	9 topics + 1 project (a streaming analytics dashboard)
Level 4 · Master	Managed vs self-hosted deployment, Node.js vs Edge runtime, monorepos, observability, large-app architecture, upgrades & codemods, accessibility, static export & CDNs, production readiness	9 topics + 1 capstone (a production-grade Next.js app)

How to use this site¶

Keep one project open. Scaffold an app in lesson 02 of Level 1 and keep adding to it. Code blocks titled with a path (app/blog/[slug]/page.tsx, db/schema.ts) show exactly where each file lives, because in Next.js the path is part of the code.
Run next build, not just next dev. Development mode renders everything on demand; the production build is where you see which routes are static, which are dynamic, and which prerender errors you have. Many lessons ask you to read the build output's route table.
Know React first. This course assumes you can write function components, use props, state and effects. If not, start with React Mastery Path, which also gives an overview of React Server Components that this course builds on. For the language, see TypeScript Mastery Path; for the server runtime underneath Next.js, see Node.js Mastery Path; for deeper end-to-end testing, see Playwright Mastery Path; for containers, see Docker Mastery Path.
Do the Exercise at the end of each lesson; the module-10 projects reuse them.