Next.js - Full-Stack React

Inhalt

Die Themen sind in eigene Next.js-Apps als Übung und als fertige Lösung aufgeteilt. Wir arbeiten gegen ein gemeinsames NestJS-Backend und bauen die Anwendung Schritt für Schritt aus. Für Inhouse-Durchführungen passen wir Schwerpunkte und Beispiele an Ihre Anwendung und Plattform an.

Einstieg und Überblick

• Was Next.js zu React hinzufügt und wann es die richtige Wahl ist
• App Router und Pages Router im Vergleich - und wie beide nebeneinander laufen
• Kurs-Setup: Turborepo-Monorepo, NestJS-Backend, gemeinsame UI-Library

Routing und Navigation

• Dateibasiertes Routing, dynamische und verschachtelte Routen
• Layouts, verschachtelte Layouts, Loading- und Error-States
• Bewährte Ordnerstruktur für Routen, Layouts und Komponenten
• Hands-On: Seitenstruktur der Kurs-Anwendung aufbauen

Rendering und Server Components

• Statisches und dynamisches Rendering, Streaming
• Server und Client Components: wo die Grenze liegt und warum sie zählt
• UI-Libraries einbinden: Tailwind CSS, shadcn/ui, CSS Modules, Client-only Libraries
• Bilder optimiert einbinden
• Hands-On: Server und Client Components kombinieren und die Anwendung stylen

Data Fetching und Caching

• Daten serverseitig laden - und wann clientseitiges Laden trotzdem sinnvoll ist
• Caching-Ebenen von Next.js und die geänderten Defaults seit Next.js 15
• Revalidierung und Cache-Invalidierung nach Zeit, Pfad und Tag
• Hands-On: Daten aus dem NestJS-Backend laden und das Caching gezielt steuern

Server Actions und Formulare

• Formulare mit Server Actions statt eigener API-Endpunkte
• Progressive Enhancement: Formulare, die auch ohne JavaScript funktionieren
• Client- und serverseitige Validierung mit zod und React Hook Form
• Daten ändern und danach gezielt revalidieren
• Hands-On: Formular mit Validierung, Mutation und Revalidierung bauen

Middleware / Proxy

• Logik vor jedem Request: Redirects, Rewrites, Header und Cookies
• Matcher und Verkettung mehrerer Middleware-Funktionen
• Hands-On: eigene Proxy-Kette für die Anwendung schreiben

Authentifizierung

• Authentifizierung mit Better Auth, E-Mail und Passwort
• Cookie-basierte Sessions in Server und Client Components
• Routen und Seiten nach Login-Status schützen
• Hands-On: Login einbauen und geschützte Bereiche absichern

Internationalisierung

• Internationalisierung und Lokalisierung im App Router
• Sprachrouting über den Pfad und die Browser-Sprache
• Übersetzungen mit next-intl
• Hands-On: Anwendung mehrsprachig machen

Deployment und Betrieb

• Hosting-Optionen: Vercel, andere Plattformen oder Self-Hosting
• Output-Modi, Standalone-Build und Dockerfile für Next.js
• Mehrere Instanzen betreiben: gemeinsamer Cache mit Redis
• Strukturiertes Logging mit Pino, Monitoring mit Sentry und Real User Monitoring
• Beispiel-Architektur mit Container-Orchestrierung auf AWS

Testing

• Test-Arten und wofür sie sich eignen: Unit, Component, Integration, End-to-End
• Komponenten und Logik testen mit Jest und React Testing Library
• End-to-End-Tests mit Playwright oder Cypress im Überblick

Ausblick

• Partial Prerendering und React Compiler

Ziel ist nicht, jede Next.js-Funktion einmal gesehen zu haben, sondern die Konzepte hinter dem App Router zu verstehen - damit Sie im Projekt die richtigen Entscheidungen treffen und Next.js-Anwendungen bauen, die schnell, sicher und wartbar sind.

Der effektive Kursinhalt kann, abhängig von Trainer, Durchführung, Dauer und Konstellation der Teilnehmer:innen, von obigen Angaben abweichen.