Next.js

What you'll learn

• Structure a Next.js App Router project with layouts, pages, dynamic routes and not-found handling.
• Choose between Server and Client Components and pass data across the boundary correctly.
• Decide what is static, prerendered or dynamic, and apply the caching and revalidation tools Next.js provides.
• Handle mutations with Server Actions and build APIs with Route Handlers, redirects and Proxy.
• Add metadata, loading and error states, and optimise images and fonts.
• Build, configure and deploy a Next.js app securely.

Syllabus

What Next.js Adds to React

1. Next.js and the App Router
2. Project Structure
3. Rendering Strategies at a Glance

Routing, Layouts and Dynamic Segments

1. Layouts and Pages
2. Dynamic Routes and params
3. Not-Found Pages and Real 404s

Server and Client Components

1. Server Components
2. Client Components
3. The Server-Client Boundary

Static, Dynamic and Cached Data

1. Static Versus Dynamic Rendering
2. Prerendering Dynamic Routes
3. Caching Models: Cache Components and the Previous Model
4. Revalidation

Mutations With Server Actions

1. Server Actions in Forms
2. Securing Server Actions
3. Form UX: Pending States and Errors

Route Handlers, Proxy and Redirects

1. Route Handlers
2. Proxy (Formerly Middleware)
3. Redirects and Configuration

Metadata, Loading, Errors and Assets

1. Metadata
2. Loading and Error States
3. Images and Fonts

Building, Deploying and Reviewing

1. Building and Deploying
2. Environment Variables and Security
3. A Next.js Review Checklist