cf.completefrontend
THE NEXT.JS FIELD GUIDE

Next.js

The complete path through Next.js: from your first route and layout, through Server and Client Components, data fetching, rendering, and caching, to authentication, production, and how Next.js works under the hood. Written for learners who already know React; each lesson pairs a short explanation with code you can run and change.

104 lessons on the way22 modules10 stagesBeginner to expert
Start hereLesson 1.1 Coming soon

Why Next.js?

What a React framework adds: routing, server rendering, data loading, bundling and optimizations, and when you don't need one. The Next.js lessons are being written, and this one opens first.

See it in the learning path
Welcome to Next.jsComing soon

// What you’ll learn

  • What React leaves to you
  • What a framework decides for you
  • Next.js, Remix and Astro
  • When a plain React app is enough

Your progress

View detailed stats
104 lessons on the way

Your progress starts with the first published lesson.

day streak
0
days this week
0
stages done
0/10

The learning path

104 lessons coming soon

10 stages, in order. Each one builds on the last, from your first route to how Next.js renders, caches, and serves your app. Every lesson is listed now, and each one opens as soon as it's published. Jump to a stage, or search for any topic.

  1. STAGE 1 · BEGINNERGetting started1 module · 6 lessons
  2. STAGE 2 · BEGINNERRouting and navigation2 modules · 11 lessons
  3. STAGE 3 · BEGINNERServer and Client Components1 module · 4 lessons
  4. STAGE 4 · BEGINNERStyling, assets and metadata3 modules · 10 lessons
  5. STAGE 5 · INTERMEDIATEFetching and mutating data2 modules · 10 lessons
  6. STAGE 6 · INTERMEDIATERendering and caching2 modules · 12 lessons
  7. STAGE 7 · ADVANCEDBuilding real apps3 modules · 14 lessons
  8. STAGE 8 · ADVANCEDProduction3 modules · 14 lessons
  9. STAGE 9 · ADVANCEDArchitecture and the Pages Router2 modules · 8 lessons
  10. STAGE 10 · EXPERTUnder the hood3 modules · 15 lessons

104 lessons in 10 stages and 22 modules.

Stage 1 Beginner

Getting started

What Next.js adds to React, the React it builds on, a first look at how it works, and your first app.

1 module · 6 lessons

  1. 0 of 6 lessons ready

    Module 1: Welcome to Next.js

    Why Next.js exists, what you need to know first, and how to start and organize a project.

    1. 1.1Why Next.js?Soon
    2. 1.2The React you need for Next.jsSoon
    3. 1.3How Next.js works: a first lookSoon
    4. 1.4Creating a Next.js appSoon
    5. 1.5Project structureSoon
    6. 1.6Your first Next.js appSoon

Stage 2 Beginner

Routing and navigation

Folders become URLs: pages, layouts, links, dynamic segments, and the special files for loading, errors and not found.

2 modules · 11 lessons

  1. 0 of 5 lessons ready

    Module 2: Pages, layouts and links

    Turn folders into routes, share UI with layouts, move between pages, and read the URL.

    1. 2.1File-system routingSoon
    2. 2.2Layouts and pagesSoon
    3. 2.3Linking and navigatingSoon
    4. 2.4Dynamic routesSoon
    5. 2.5Search params and URL stateSoon
  2. 0 of 6 lessons ready

    Module 3: Organizing routes and special files

    Group routes without changing URLs, and add loading states, error screens, not-found pages and redirects.

    1. 3.1Route groups and private foldersSoon
    2. 3.2Loading UISoon
    3. 3.3Error handlingSoon
    4. 3.4Not found, forbidden and unauthorizedSoon
    5. 3.5RedirectsSoon
    6. 3.6Templates and the file hierarchySoon

Stage 3 Beginner

Server and Client Components

Where your code runs: Server Components by default, Client Components for interactivity, and how they fit together.

1 module · 4 lessons

  1. 0 of 4 lessons ready

    Module 4: Server and Client Components

    Decide what runs on the server and what ships to the browser, and pass data across the boundary safely.

    1. 4.1Server Components in Next.jsSoon
    2. 4.2Client ComponentsSoon
    3. 4.3Composing Server and Client ComponentsSoon
    4. 4.4Server-only code and environment variablesSoon

Stage 4 Beginner

Styling, assets and metadata

Style your app, ship fast images, fonts and scripts, and give every page the metadata search engines and social apps read.

3 modules · 10 lessons

  1. 0 of 3 lessons ready

    Module 5: Styling

    Global CSS, CSS Modules, Tailwind CSS, and which CSS-in-JS libraries work with Server Components.

    1. 5.1CSS in Next.jsSoon
    2. 5.2Tailwind CSS in Next.jsSoon
    3. 5.3CSS-in-JS and Server ComponentsSoon
  2. 0 of 4 lessons ready

    Module 6: Images, fonts and scripts

    The built-in components that keep pages fast: next/image, next/font and next/script.

    1. 6.1Optimizing imagesSoon
    2. 6.2Optimizing fontsSoon
    3. 6.3Scripts and third-party codeSoon
    4. 6.4Static files and the public folderSoon
  3. 0 of 3 lessons ready

    Module 7: Metadata and SEO

    Titles, descriptions, social images, sitemaps and robots: everything search engines and link previews read.

    1. 7.1The Metadata APISoon
    2. 7.2Open Graph imagesSoon
    3. 7.3Sitemaps, robots and structured dataSoon

Stage 5 Intermediate

Fetching and mutating data

Load data on the server, stream it in with Suspense, and change it with Server Actions and forms.

2 modules · 10 lessons

  1. 0 of 5 lessons ready

    Module 8: Fetching data

    Load data in Server Components without waterfalls, stream slow parts, and fetch in the browser when you must.

    1. 8.1Fetching data in Server ComponentsSoon
    2. 8.2Connecting a databaseSoon
    3. 8.3Parallel and sequential fetchingSoon
    4. 8.4Streaming with SuspenseSoon
    5. 8.5Fetching in the browserSoon
  2. 0 of 5 lessons ready

    Module 9: Mutating data

    Change data with Server Actions and forms, show pending and optimistic states, and build your own endpoints.

    1. 9.1Server ActionsSoon
    2. 9.2FormsSoon
    3. 9.3Pending and optimistic UISoon
    4. 9.4Updating the UI after a mutationSoon
    5. 9.5Route HandlersSoon

Stage 6 Intermediate

Rendering and caching

Static and dynamic rendering, Partial Prerendering, and caching with Cache Components: what runs when, and what is reused.

2 modules · 12 lessons

  1. 0 of 4 lessons ready

    Module 10: Rendering

    Prerendering at build time, rendering on request, and Partial Prerendering, which mixes both in one page.

    1. 10.1How Next.js renders pagesSoon
    2. 10.2Request-time APIsSoon
    3. 10.3Partial PrerenderingSoon
    4. 10.4generateStaticParamsSoon
  2. 0 of 8 lessons ready

    Module 11: Caching with Cache Components

    Opt-in caching with 'use cache', cache lifetimes and tags, revalidation, and instant navigations.

    1. 11.1Cache ComponentsSoon
    2. 11.2The 'use cache' directiveSoon
    3. 11.3Cache lifetimes and tagsSoon
    4. 11.4Revalidating cached dataSoon
    5. 11.5Private and remote cachesSoon
    6. 11.6Instant navigations and partial prefetchingSoon
    7. 11.7Incremental Static RegenerationSoon
    8. 11.8Caching before Cache ComponentsSoon

Stage 7 Advanced

Building real apps

Advanced routing, proxy.ts, authentication and security, internationalization, content and AI features.

3 modules · 14 lessons

  1. 0 of 5 lessons ready

    Module 12: Advanced routing

    Parallel and intercepting routes, proxy.ts, internationalized routes and multi-tenant apps.

    1. 12.1Parallel routesSoon
    2. 12.2Intercepting routes and modalsSoon
    3. 12.3proxy.tsSoon
    4. 12.4InternationalizationSoon
    5. 12.5Multi-tenant appsSoon
  2. 0 of 5 lessons ready

    Module 13: Authentication and security

    Sign users in, check access everywhere data is read or changed, and harden the app against real attacks.

    1. 13.1AuthenticationSoon
    2. 13.2Authorization and the data access layerSoon
    3. 13.3Securing Server ActionsSoon
    4. 13.4Security headers and Content Security PolicySoon
    5. 13.5Case study: the middleware bypassSoon
  3. 0 of 4 lessons ready

    Module 14: Content, background work and AI

    MDX content, CMS previews, work after the response, and streaming AI features.

    1. 14.1MDX contentSoon
    2. 14.2Draft mode and CMS previewsSoon
    3. 14.3Work after the responseSoon
    4. 14.4Building AI featuresSoon

Stage 8 Advanced

Production

Make it fast, test it, debug it, deploy it anywhere, and keep it up to date.

3 modules · 14 lessons

  1. 0 of 4 lessons ready

    Module 15: Performance and accessibility

    Measure Core Web Vitals, shrink bundles, let the compiler memoize, and keep the app accessible.

    1. 15.1Core Web VitalsSoon
    2. 15.2Shrinking the JavaScript bundleSoon
    3. 15.3The React Compiler in Next.jsSoon
    4. 15.4AccessibilitySoon
  2. 0 of 4 lessons ready

    Module 16: Testing, debugging and observability

    Test components and whole flows, debug the server and the browser, and see what production is doing.

    1. 16.1Testing componentsSoon
    2. 16.2End-to-end testingSoon
    3. 16.3DebuggingSoon
    4. 16.4Instrumentation and observabilitySoon
  3. 0 of 6 lessons ready

    Module 17: Deploying and upgrading

    Deploy to Vercel or your own servers, export a static site, run on other platforms, and upgrade safely.

    1. 17.1Deploying Next.jsSoon
    2. 17.2Self-hostingSoon
    3. 17.3Static exportsSoon
    4. 17.4Adapters and other platformsSoon
    5. 17.5The production checklistSoon
    6. 17.6Upgrading Next.jsSoon

Stage 9 Advanced

Architecture and the Pages Router

Structure large apps, share code across apps, build one project end to end, and work with the Pages Router.

2 modules · 8 lessons

  1. 0 of 5 lessons ready

    Module 18: Large apps

    Project structure, monorepos, multi-zones, a backend for your frontend, and a full project from start to finish.

    1. 18.1Structuring a large appSoon
    2. 18.2Next.js as a backend for your frontendSoon
    3. 18.3MonoreposSoon
    4. 18.4Multi-zonesSoon
    5. 18.5Project: a full-stack appSoon
  2. 0 of 3 lessons ready

    Module 19: The Pages Router

    The original router, still in many codebases: pages, data fetching, and moving to the App Router.

    1. 19.1Pages Router basicsSoon
    2. 19.2Data fetching in the Pages RouterSoon
    3. 19.3Migrating to the App RouterSoon

Stage 10 Expert

Under the hood

How Next.js really works, read from its source on GitHub: the server, the build, bundlers, RSC rendering, the client router, caching and actions.

3 modules · 15 lessons

  1. 0 of 4 lessons ready

    Module 20: The server and the build

    Find your way around the repository, and follow a request through the server and an app through the build.

    1. 20.1A tour of the Next.js repositorySoon
    2. 20.2From next dev to a responseSoon
    3. 20.3Inside next buildSoon
    4. 20.4SWC and TurbopackSoon
  2. 0 of 4 lessons ready

    Module 21: Rendering on the server

    How directives become references, how a route becomes a component tree, and how the RSC payload streams to the browser.

    1. 21.1'use client' and 'use server' under the hoodSoon
    2. 21.2How a route becomes a React treeSoon
    3. 21.3The RSC payloadSoon
    4. 21.4Prerendering and Partial PrerenderingSoon
  3. 0 of 7 lessons ready

    Module 22: The client router, caching and actions

    Navigations, prefetching, the cache, Server Actions, proxy.ts and images, then a small Next.js of your own.

    1. 22.1The client routerSoon
    2. 22.2Caching under the hoodSoon
    3. 22.3Server Actions under the hoodSoon
    4. 22.4proxy.ts and runtimes under the hoodSoon
    5. 22.5Images and fonts under the hoodSoon
    6. 22.6Adapters and deployment outputsSoon
    7. 22.7Build your own Next.jsSoon