Foundations
What Next.js is, the App Router, Server vs. Client Components, and file conventions. Start →
Next.js — From Zero to Hero
A standalone, developer-focused course on Next.js — the React framework. From the App Router and Server Components to the four caching layers, streaming rendering, and Server Actions — taught through real code and diagrams. Every version-sensitive detail (fetch no longer cached by default, the use cache / cacheComponents model, Partial Prerendering) is verified against current docs.
What you’ll learn
Section titled “What you’ll learn”Routing & Navigation
Layouts and nested routes, dynamic segments, route groups, parallel & intercepting routes, loading/error UI. Route →
Data Fetching & Caching
Fetching in Server Components and the four caching layers — Request Memoization, Data Cache, Full Route Cache, Router Cache — plus revalidation. Cache →
Rendering
Static vs. dynamic rendering, streaming with Suspense, and Partial Prerendering via cacheComponents. Render →
Server Actions & Mutations
Server Actions for forms and mutations, revalidatePath/revalidateTag, and the client/server boundary. Mutate →
Optimization
Image, Font and Script components, the Metadata API, bundle analysis, and Turbopack. Optimize →
Production & Ecosystem
Middleware, auth patterns, environment config, and deployment beyond Vercel. Ship it →
How this course works
Section titled “How this course works”Server-first, boundary-aware
App Router components are Server Components by default; "use client" marks a boundary that spreads to everything imported past it. This course teaches where that boundary is and why it matters, not just the syntax.
Current behavior, verified
Written against current Next.js and checked against the official docs via context7 — including the big shift most tutorials miss: fetch and GET Route Handlers are no longer cached by default, and caching is now opt-in via use cache / cacheComponents.
Four caches, not one
Request Memoization, the Data Cache, the Full Route Cache, and the client Router Cache each live at a different layer with different lifetimes and invalidation — the single most misunderstood part of Next.js, taught layer by layer.
Diagrams that explain
The RSC request lifecycle, the four caching layers, the streaming/Suspense flow, and the Server Action round-trip as theme-aware Mermaid diagrams. Bilingual (English / ไทย) with saved quiz progress.