• Format — 1,200+ multiple-choice questions with instant explanations
• Duration — about 13h of focused practice, most learners spread it over 3–4 weeks
• Level — intermediate; assumes working knowledge of React and JavaScript
• Cost — free, with a public completion certificate
• Audience — React developers moving to Next.js, frontend engineers prepping interviews, full-stack developers building production apps
• Companion courses — pair with React Advanced Patterns for deeper client-side patterns

The course is built for three audiences. First, React developers moving to Next.js — you know components, hooks, and state, and now need to learn what the framework adds on top: routing, server-side rendering, caching, and the App Router model. Second, frontend engineers preparing for Next.js interview rounds at product companies, where questions on Server Components, the cache layers, and Server Actions vs Route Handlers come up routinely. Third, full-stack developers building production apps who want a structured way to internalise the framework's primitives instead of pattern-matching from documentation snippets.

Foundations

• App Router & File-based Routing — routing basics, advanced route segments (dynamic, catch-all, parallel, intercepted), and programmatic navigation
• Server Components & Client Components — the component model, composition patterns, and the data/state boundary between server and client
• Rendering Strategies — static, dynamic, streaming, ISR, and how Pages Router rendering differs from the App Router
• Layouts, Templates & Nested Routes — when state is preserved vs reset, route groups, and nested route behaviour

Depth

• Data Fetching — server-side fetches, the multi-layer Next.js cache, and parallel vs sequential fetching patterns
• Loading, Error & Not-Found States — the conventions for each state, how they nest with route hierarchy, redirect handling
• Server Actions & Form Handling — basics, common patterns, mutations, and revalidation paths
• Route Handlers — GET/POST handlers, request and response objects, and route-handler caching semantics
• Middleware — middleware basics, common patterns (auth gating, redirects, rewrites), and the runtime limitations to design around

Mastery

• Optimizations — Image and Font optimization, the Script component, and bundle-level performance patterns
• Metadata API & SEO — static metadata, dynamic metadata, file-based metadata (sitemap, robots, OG images), and how metadata interacts with rendering
• Review & Mastery — concept comparisons, pattern selection, and applying the framework's primitives together under realistic constraints

The framework has a small set of primitives that look similar on the surface but behave very differently. The course is built around exactly these decisions:

• Server Component vs Client Component — when each is required, what the boundary actually transmits, and why "use client" is a one-way door
• Server Action vs Route Handler — when to reach for which, and what each does to the cache
• Static vs dynamic rendering — what forces dynamic, what keeps it static, and where streaming fits in
• The fetch cache, the Router cache, and the Data cache — three layers, three invalidation models
• Layouts vs templates — when state is preserved vs reset across navigations
• App Router vs Pages Router — what changed, what stayed, and what to expect in a migration
• Middleware runtime limits — what you can and cannot do in the edge runtime
• Metadata routing — static metadata exports vs generateMetadata vs file-based conventions
• Revalidation paths — revalidatePath vs revalidateTag vs time-based revalidation

React is the view library; Next.js is the framework that wraps it for production. With raw React (Vite, CRA), you wire up your own router, your own data-fetching layer, your own SSR setup if you need it, and your own bundling story. With Next.js, all of those are first-class and opinionated — routing is file-based, data fetching is server-first by default, server components are baked in, and the build pipeline handles streaming, image optimization, and SEO metadata out of the box. The trade-off is that you are now reasoning inside the framework's mental model: when does a component become a Client Component, when does a route opt out of static rendering, and so on. That mental model is what this course teaches.

Interview questions on Next.js cluster around four areas: the App Router model ("what's the difference between a layout and a template?"), Server vs Client Components ("what does "use client" actually do?"), caching ("there are three caches — name them and how each one is invalidated"), and Server Actions ("when would you use a Server Action vs a Route Handler?"). The trap-and-comparison questions in this course map directly onto those patterns.

Read the docs, build a small project, then drill the conceptual decisions until they are automatic. Most engineers can build a working Next.js app by copying snippets — but the App Router model is decision-heavy, and the decisions matter more than the syntax. Active recall through MCQs is the fastest way to internalise those decisions, because every wrong answer maps to a concrete misunderstanding the explanation fixes on the spot.

You answer one question at a time. If you get it wrong, the explanation appears immediately — what the right answer is, why your choice was wrong, and the underlying Next.js rule. The AI guide tracks which topics you keep slipping on and resurfaces them later, so the App Router decisions you keep getting wrong stop being weak spots by the time you finish.

At 1,200+ MCQs and about 35–40 seconds per question (including reading the explanation), the full course is roughly 13 hours of focused practice. Most learners spread that across 3–4 weeks at 30–45 minutes a day. The hero stat shows the same number — 13.0h of content.

If you find the React parts of Next.js fuzzy, drop into React Fundamentals for a refresher before continuing. After this course, the natural next step depends on your goal: React Advanced Patterns for deeper client-side patterns, or a Node.js track if you want to understand what runs on the server side of your Next.js deployment.