Free course

Next.js Course

Learn the Next.js App Router by building routes, Server and Client Components, data loading, forms, Server Actions, Route Handlers, and a production build.

5 modules · 25 lessons · No signup

Prerequisites: React, TypeScript and HTTP

Download this course as PDF or EPUB

Read it offline, on your Kindle, or print it. Join my free newsletter and you get this course plus every other book and course I published.

Download PDFDownload EPUB
~~~

Your progress

of lessons completed.

Course completed.

What you'll learn

Build a production-shaped App Router application with nested and dynamic routes, server data, a validated mutation, useful failure states, and a small HTTP endpoint.

Course contents

  1. App Router foundations

    Create a current project, read its structure, and place Server and Client Component boundaries.

    1. ✓ What Next.js adds to React
    2. ✓ Create an App Router project
    3. ✓ Read the project structure
    4. ✓ Separate Server and Client Components
    5. ✓ Check your understanding: app router foundations

  2. Routing and navigation

    Build pages, layouts, nested and dynamic routes, and semantic navigation.

    1. ✓ Create pages and layouts
    2. ✓ Nest and organize routes
    3. ✓ Build dynamic routes
    4. ✓ Link and navigate
    5. ✓ Check your understanding: routing and navigation

  3. Data and rendering

    Load server data, stream UI, handle failures, cache deliberately, and add metadata.

    1. ✓ Fetch data on the server
    2. ✓ Stream useful loading UI
    3. ✓ Handle errors and missing data
    4. ✓ Cache, revalidate, and describe a page
    5. ✓ Check your understanding: data and rendering

  4. Actions and forms

    Validate FormData, mutate on the server, revalidate views, and show useful pending states.

    1. ✓ Create a Server Action
    2. ✓ Validate FormData
    3. ✓ Mutate and revalidate
    4. ✓ Show pending and result states
    5. ✓ Check your understanding: actions and forms

  5. Build a production-shaped app

    Add an HTTP endpoint, protect configuration, optimize assets, and verify the production build.

    1. ✓ Add a Route Handler
    2. ✓ Protect environment values
    3. ✓ Use optimized images and fonts
    4. ✓ Build and review Field Notes
    5. ✓ Check your understanding: build a production-shaped app