AI Workshop: learn to build apps with AI →
Next.js (App Router)
Build modern React applications with the App Router, Server Components, and React 19

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.

Next.js App Router is the modern way to build React applications, introduced in Next.js 13 and refined in subsequent versions.

The App Router uses the app/ directory and brings powerful new features:

  • React Server Components - Components that render on the server by default
  • Server Actions - Call server-side functions directly from components
  • Streaming - Progressively render UI as data becomes available
  • Nested Layouts - Share UI between routes while preserving state
  • Parallel Routes - Render multiple pages simultaneously
  • Intercepting Routes - Show routes in modals or overlays

The App Router is built on React 19’s new features including:

  • The use() hook for data fetching
  • useFormStatus for form states
  • useOptimistic for optimistic updates
  • useActionState for action handling

This unit covers the App Router pattern and React 19 features for building modern Next.js applications.

Lessons in this unit:

0: ▶︎ Introduction
1: Server Actions
2: Next.js, passing an id to a server action
3: The use hook
4: use() and data fetching
5: The useFormStatus Hook
6: The useOptimistic hook
7: The useActionState hook
8: How to get the Request headers in Next.js app router
9: How to install shadcn-ui on latest Next.js beta-RC