How much Next.js do you already have?
Be honest — nobody is watching. This only decides which chapters come first; every chapter stays open to you either way.
“I can build a working site.”
Start with the App Router — pages, layouts, and a small site that fetches data, styled and linked together.
- You know React (components, props, state, useEffect)
- You haven't built a routed, multi-page Next app yet
- You want the file-based routing model once, in order
“I understand the server/client boundary.”
You can route and render. Now learn where server ends and client begins — data fetching, server actions, middleware, and how auth actually fits in.
- Comfortable with the App Router and basic data fetching
- You've hit a "you're importing a Client Component into a Server Component" error and guessed your way past it
- You want a real app — auth, forms, SEO, tested
“I can reason about the cache layers.”
ISR, streaming, the four caches stacked on top of each other, and the deployment decisions behind a production Next app.
- You can already ship an authenticated app with Server Actions
- You debug stale data and cache-invalidation bugs, not just component bugs
- You want the why under ISR, streaming and the edge runtime
Not sure? Start at Beginner — every path opens at the section people usually skip.
Full syllabus
Everything each level eventually covers — ticked sections are written, the rest are still on the desk.
Beginner0 / 8 sections written
- What Next.js is & project setupcoming soon
create-next-app, project structure, file conventions
- The App Routercoming soon
Pages, layouts, nested routes
- Routingcoming soon
Dynamic routes, route groups, not-found and error pages
- Rendering basicscoming soon
SSR vs SSG vs CSR — the overview
- Data fetching (basic)coming soon
fetch in server components, caching defaults (surface level)
- Styling in Nextcoming soon
CSS Modules, Tailwind, global styles
- Images & fontscoming soon
next/image, next/font
- Linking & navigationcoming soon
next/link, useRouter/useParams/usePathname
✅ Checkpoint: you can build a small multi-page site with the App Router, fetching data, styled, with images and fonts handled properly.
Intermediate0 / 11 sections written
- Server vs Client Componentscoming soon
The boundary, "use client", composition patterns
- Parallel & intercepting routescoming soon
@slot parallel routes, default.tsx · Intercepting routes — (.), (..), the modal-over-route pattern
- Data fetching in depthcoming soon
Revalidation, cache tags, dynamic vs static rendering
- API routes / Route Handlerscoming soon
Building a backend inside Next with Route Handlers
- Server Actionscoming soon
Mutations, forms, useFormStatus / useActionState
- Middlewarecoming soon
Auth checks, redirects, edge middleware
- Metadata & SEOcoming soon
generateMetadata, sitemap.ts, robots.ts
- Environment & configcoming soon
Env vars, next.config.js essentials
- Authentication in Nextcoming soon
NextAuth/Auth.js patterns
- Error handlingcoming soon
error.tsx, not-found.tsx, loading.tsx
- Testing a Next appcoming soon
Component testing and route testing
✅ Checkpoint: you can ship an authenticated app with Server Actions, proper metadata, and tests, and explain why each component is server or client.
Advanced0 / 10 sections written
- Rendering strategies in depthcoming soon
ISR, streaming, partial prerendering
- Caching architecturecoming soon
The four cache layers: request, data, full route, router
- Performancecoming soon
Bundle analysis, code splitting, Core Web Vitals
- Deploymentcoming soon
Vercel vs self-hosted, edge runtime vs Node runtime
- Internationalizationcoming soon
i18n routing strategies
- Monorepos with Next.jscoming soon
Turborepo, shared packages across apps
- Advanced Server Actions patternscoming soon
Optimistic UI, useOptimistic
- Databases in Nextcoming soon
Connection handling in a serverless/edge environment
- Security in Nextcoming soon
Server Action security, headers, CSP
- Migrating Pages Router to App Routercoming soon
Incremental adoption strategy
✅ Checkpoint: you can explain which of Next's four caches is serving a stale response, choose a rendering strategy with tradeoffs, and defend a deployment target (edge vs Node runtime).
- The server/client component boundary shows up right after routing on purpose — almost every other intermediate topic (data fetching, server actions, middleware) assumes you already know which side of it you're on.
- Next's caching model is famously confusing because it's four separate caches stacked on each other — it gets its own advanced chapter instead of being folded into data fetching.
- Deployment and the edge runtime sit at the end of advanced because they're where every earlier decision (rendering strategy, caching, middleware) actually gets tested.