Next.js App Router in Depth

What you’ll learn

• Model routes with layouts

  Compose nested layouts, templates, and route groups so shared UI never re-renders needlessly.

• Draw the server/client line

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

• Control caching

  Understand what is cached, for how long, and how to revalidate it on demand instead of guessing.

• Mutate with server actions

  Handle forms, validation, and optimistic updates without hand-writing an API layer.

1. 1Routing and LayoutsHow the App Router turns folders into URLs, and how layouts let you share UI without re-rendering it.20m 26s

   1. Lesson 1.11.1File-system routing and the app directoryFree preview
      5m 50s
   2. Lesson 1.21.2Layouts, templates, and shared UI
      6m 20s
   3. Lesson 1.31.3Dynamic routes and route params
      8m 16s
2. 2Server and Client ComponentsThe boundary that defines the App Router: what runs on the server, what ships to the browser, and how data crosses between them.32m 41s

   1. Lesson 2.12.1What server components actually do
      15m 48s
   2. Lesson 2.22.2The "use client" boundary
      10m 34s
   3. Lesson 2.32.3Passing data across the boundary
      6m 19s
3. 3Data Fetching and CachingFetching data where it belongs, understanding what gets cached, and streaming the slow parts so the page appears immediately.32m 50s

   1. Lesson 3.13.1Fetching data in server components
      4m 21s
   2. Lesson 3.23.2Caching and revalidation
      25m 22s
   3. Lesson 3.33.3Streaming with Suspense
      3m 7s
4. 4Server Actions and MutationsWriting data from the client without hand-building an API: actions, form validation, and optimistic UI.33m 32s

   1. Lesson 4.14.1Writing your first server action
      7m 51s
   2. Lesson 4.24.2Forms, validation, and error states
      16m 56s
   3. Lesson 4.34.3Optimistic updates
      8m 45s