Next.js Quest

Tracks

1. 01▲Why Next.js? Foundations

   0/8 lessons

   React is a library; Next.js is the framework around it

   Where Next.js fits, what it gives you, and how to bootstrap a project with the conventions on by default.

   Lesson list (8)

   • 01
     React Is a Library, Not a Framework~22 min · React, Next.js, framework, DIY tax
   • 02
     What Next.js Provides~22 min · conventions, Turbopack, App Router, RSC
   • 03
     The Rendering Spectrum~24 min · SSG, ISR, SSR, CSR, RSC
   • 04
     App Router vs Pages Router~22 min · App Router, Pages Router, migration
   • 05
     Why App Router Wins~22 min · RSC, streaming, Suspense, parallel routes
   • 06
     Vercel & The Ecosystem~18 min · Vercel, ecosystem, deployment
   • 07
     Next.js vs Alternatives~18 min · Remix, Astro, SvelteKit, Nuxt
   • 08
     Your First Project~20 min · create-next-app, project structure, Turbopack

   ✓Quiz · 4 questions→

2. 02🗺️App Router & Routing

   0/10 lessons

   File-system routing, layouts, dynamic and parallel routes

   How the App Router maps folders to URLs, persists layouts, and composes loading/error/parallel slots.

   Lesson list (10)

   • 01
     File-Based Routing Basics~20 min · routing, file system, page.tsx
   • 02
     page.tsx — The Route Component~22 min · page, params, Promise
   • 03
     layout.tsx — Shared UI~20 min · layout, persistence, root layout
   • 04
     Nested Layouts~20 min · layout, nesting, template
   • 05
     Dynamic Routes~22 min · dynamic segment, catch-all, optional
   • 06
     Route Groups~18 min · route group, layout split, URL
   • 07
     Parallel Routes~24 min · parallel routes, @slot, dashboard
   • 08
     Intercepting Routes~22 min · intercepting routes, modal, overlay
   • 09
     Loading, Error & Not Found~22 min · loading, error, not-found, Suspense
   • 10
     Navigation~20 min · Link, useRouter, redirect, prefetch

   ✓Quiz · 4 questions→

3. 03⚡Server & Client Components

   0/8 lessons

   Server-first by default, client where it matters

   When components run on the server, when they ship to the browser, and how to compose the two without leaking data or bundles.

   Lesson list (8)

   • 01
     Server Components Are the Default~22 min · RSC, default, server
   • 02
     Why Server Components?~20 min · bundle, perf, security
   • 03
     Client Components~20 min · use client, interactivity, hooks
   • 04
     The Decision Framework~18 min · server vs client, decision, tree
   • 05
     Data in Server Components~20 min · fetch, async, Promise.all
   • 06
     The Serialization Boundary~22 min · serialization, props, boundary
   • 07
     Composition Patterns~20 min · composition, providers, children
   • 08
     Common Mistakes~20 min · pitfalls, anti-patterns

   ✓Quiz · 4 questions→

4. 04🔄Data Fetching & Caching

   0/9 lessons

   Fetch in components, cache on purpose, invalidate on demand

   Server Component fetching, the v15 cache flip, ISR, on-demand revalidation, streaming, and the new `'use cache'` directive.

   Lesson list (9)

   • 01
     Server Component Fetching~20 min · fetch, Server Component, dedupe
   • 02
     fetch() Is No Longer Cached~22 min · caching, v15, breaking change
   • 03
     Time-Based Revalidation (ISR)~20 min · ISR, revalidate, stale-while-revalidate
   • 04
     On-Demand Revalidation~22 min · revalidatePath, revalidateTag, Server Actions
   • 05
     Static vs Dynamic Detection~20 min · dynamic functions, force-static, force-dynamic
   • 06
     Parallel & Sequential Fetching~20 min · Promise.all, waterfall, perf
   • 07
     Streaming & Suspense~22 min · streaming, Suspense, loading
   • 08
     generateStaticParams~18 min · SSG, dynamic routes, build time
   • 09
     The 'use cache' Directive~24 min · use cache, cacheLife, cacheTag

   ✓Quiz · 4 questions→

5. 05✏️Server Actions & Forms

   0/8 lessons

   Mutations as functions, forms as the platform primitive

   Declare mutations inline, render forms that work without JS, validate with Zod, and ship optimistic UI.

   Lesson list (8)

   • 01
     What Are Server Actions?~20 min · Server Action, use server, mutations
   • 02
     Form Actions~20 min · form, action, FormData
   • 03
     useActionState~22 min · useActionState, form state, errors
   • 04
     useFormStatus~18 min · useFormStatus, pending, submit button
   • 05
     Progressive Enhancement~20 min · progressive enhancement, no-JS, forms
   • 06
     Validation with Zod~22 min · validation, Zod, security
   • 07
     Optimistic Updates~20 min · useOptimistic, instant UI
   • 08
     Security & Best Practices~22 min · security, CSRF, auth, closures

   ✓Quiz · 4 questions→

6. 06🔀Route Handlers, Auth & Middleware

   0/9 lessons

   API routes, the new proxy.ts, auth, env, and i18n

   Route Handlers for the public surface, Proxy (formerly Middleware) for cross-cutting concerns, Auth.js / Clerk / Supabase, env vars, internationalization, and error handling.

   Lesson list (9)

   • 01
     Route Handlers~20 min · route handler, API, REST
   • 02
     Proxy (formerly Middleware)~22 min · proxy, middleware, Node runtime
   • 03
     Proxy Use Cases~20 min · auth gate, geo, A/B testing
   • 04
     Auth.js v5 (NextAuth)~22 min · Auth.js, OAuth, session
   • 05
     Clerk & Supabase Auth~18 min · Clerk, Supabase Auth, managed auth
   • 06
     Protected Routes~20 min · defense in depth, auth
   • 07
     Environment Variables~18 min · env, NEXT_PUBLIC_, secrets
   • 08
     Internationalization~20 min · i18n, next-intl, locale
   • 09
     Error Handling Patterns~20 min · error.tsx, global-error.tsx, boundaries

   ✓Quiz · 4 questions→

7. 07🎨Styling, Images & Optimization

   0/8 lessons

   Tailwind, CSS Modules, fonts, images, scripts, Web Vitals

   How to style, image-optimize, and ship-fast in Next.js without fighting the framework's defaults.

   Lesson list (8)

   • 01
     CSS Modules~18 min · CSS Modules, scoping, no conflicts
   • 02
     Tailwind CSS~20 min · Tailwind v4, PostCSS, @theme
   • 03
     CSS-in-JS Limitations~18 min · CSS-in-JS, styled-components, registry
   • 04
     next/image~22 min · next/image, optimization, CLS
   • 05
     next/font~18 min · next/font, self-hosted fonts, CLS
   • 06
     Metadata API~20 min · metadata, OG image, SEO
   • 07
     next/script~18 min · next/script, loading strategy, third-party
   • 08
     Performance & Core Web Vitals~22 min · LCP, CLS, INP, Web Vitals

   ✓Quiz · 4 questions→

8. 08🚀Deployment & Production

   0/8 lessons

   Vercel, self-hosting, Docker, monitoring, and the launch checklist

   Ship Next.js to Vercel, your own box, or anywhere else — and know what to verify before going live.

   Lesson list (8)

   • 01
     Vercel Deployment~18 min · Vercel, git push, preview
   • 02
     Self-Hosting~22 min · self-host, next start, PM2
   • 03
     Docker~22 min · Docker, standalone, multi-stage
   • 04
     Static Export~18 min · static export, out, no SSR
   • 05
     Environment Variables in Production~20 min · env, build vs runtime, Docker
   • 06
     Monitoring & Error Tracking~20 min · Sentry, Web Vitals, instrumentation
   • 07
     Alternatives to Vercel~18 min · Netlify, Cloudflare Pages, AWS
   • 08
     Production Checklist~24 min · checklist, launch, audit

   ✓Quiz · 4 questions→