Next.js - Full-Stack React

Content

Topics come with their own Next.js apps as an exercise and as a finished solution. We work against a shared NestJS backend and extend the application step by step. For in-house courses, we adapt the focus and examples to your application and platform.

Introduction and overview

• What Next.js adds to React and when it is the right choice
• App Router and Pages Router compared - and how both run side by side
• Course setup: Turborepo monorepo, NestJS backend, shared UI library

Routing and navigation

• File-based routing, dynamic and nested routes
• Layouts, nested layouts, loading and error states
• A proven folder structure for routes, layouts and components
• Hands-On: build the page structure of the course application

Rendering and Server Components

• Static and dynamic rendering, streaming
• Server and Client Components: where the boundary is and why it matters
• Integrating UI libraries: Tailwind CSS, shadcn/ui, CSS Modules, client-only libraries
• Optimized images
• Hands-On: combine Server and Client Components and style the application

Data fetching and caching

• Fetching data on the server - and when client-side fetching still makes sense
• The caching layers of Next.js and the changed defaults since Next.js 15
• Revalidation and cache invalidation by time, path and tag
• Hands-On: load data from the NestJS backend and control caching precisely

Server Actions and forms

• Forms with Server Actions instead of custom API endpoints
• Progressive enhancement: forms that work even without JavaScript
• Client- and server-side validation with zod and React Hook Form
• Mutating data and revalidating afterwards
• Hands-On: build a form with validation, mutation and revalidation

Middleware / proxy

• Logic before every request: redirects, rewrites, headers and cookies
• Matchers and chaining multiple middleware functions
• Hands-On: write your own proxy chain for the application

Authentication

• Authentication with Better Auth, email and password
• Cookie-based sessions in Server and Client Components
• Protecting routes and pages based on login status
• Hands-On: add login and secure protected areas

Internationalization

• Internationalization and localization in the App Router
• Locale routing via the path and the browser language
• Translations with next-intl
• Hands-On: make the application multilingual

Deployment and operations

• Hosting options: Vercel, other platforms or self-hosting
• Output modes, standalone build and a Dockerfile for Next.js
• Running multiple instances: shared cache with Redis
• Structured logging with Pino, monitoring with Sentry and real user monitoring
• Example architecture with container orchestration on AWS

Testing

• Types of tests and what they are good for: unit, component, integration, end-to-end
• Testing components and logic with Jest and React Testing Library
• Overview of end-to-end testing with Playwright or Cypress

Outlook

• Partial Prerendering and the React Compiler

The goal is not to have seen every Next.js feature once, but to understand the concepts behind the App Router - so you make the right decisions in your project and build Next.js applications that are fast, secure and maintainable.

The actual course content may differ from the above depending on the trainer, delivery, duration and the composition of participants.