Next.js Fullstack
In 4 Tagen zur produktionsreifen Next.js-Anwendung mit App Router, Server Actions, Datenbank, Authentifizierung und Deployment
Über den Workshop
In diesem Next.js Workshop entwickelst du innerhalb von vier Tagen eine vollständige Fullstack-Webanwendung auf Basis des App Routers. Du lernst, wie Server Components und Client Components zusammenspielen, wie du Seiten und Layouts strukturierst und dynamische Routen, Ladezustände, Fehlerseiten sowie Metadaten umsetzt. Dabei geht es nicht nur um einzelne Funktionen, sondern um eine Projektstruktur, die sich auch für größere und langfristig wartbare Anwendungen eignet.
Eine durchgängige Beispielanwendung verbindet Frontend, Backend und Datenbank. Du liest Daten direkt in Server Components, setzt Mutationen mit Server Actions um und sicherst Eingaben durch serverseitige Validierung ab. Anschließend ergänzt du Authentifizierung, Session Management und rollenbasierte Autorisierung. Zum Abschluss bereitest du die Anwendung für den produktiven Betrieb vor und stellst sie wahlweise über Vercel oder als Docker-Container bereit. Dabei behandelst du auch Umgebungsvariablen, Datenbankmigrationen, Build-Prozesse und typische Sicherheitsaspekte einer produktiven Next.js-Anwendung.
Tagesablauf
Next.js, App Router und Rendering
- 01Next.js im React-Ökosystem und typische Einsatzgebiete
- 02Projektsetup mit TypeScript und App Router
- 03Ordnerstruktur, Seiten, Layouts und Route Groups
- 04Server Components und Client Components
- 05Statisches und dynamisches Rendering
- 06Navigation mit Link und programmatische Navigation
- 07Dynamische Routen und URL-Parameter
- 08Loading UI, Error Boundaries und Not-found-Seiten
- 09Metadaten und Suchmaschinenoptimierung
Datenbankanbindung, Queries und Mutations
- 01Datenbankanbindung und sichere Verwendung von Umgebungsvariablen
- 02Datenmodellierung und Datenbankmigrationen
- 03Datenabfragen in Server Components
- 04Dynamische Abfragen und Detailseiten
- 05Erstellen, Ändern und Löschen von Datensätzen
- 06Server Actions für Datenmutationen
- 07Formulare und serverseitige Validierung
- 08Fehlerbehandlung und strukturierte Rückgabewerte
- 09Cache-Verhalten, Revalidierung und Aktualisierung der Benutzeroberfläche
Authentication, Sessions und Authorization
- 01Unterschiede zwischen Authentication und Authorization
- 02Registrierung, Anmeldung und Abmeldung
- 03Sicheres Speichern und Prüfen von Passwörtern
- 04Session Management mit Cookies
- 05Zugriff auf den angemeldeten Benutzer in Server Components
- 06Geschützte Seiten und Weiterleitungen
- 07Rollen und Berechtigungen
- 08Autorisierung von Server Actions und Datenbankzugriffen
- 09Sicherheitsaspekte bei Formularen und Benutzereingaben
Produktionsbetrieb mit Vercel und Docker
- 01Produktionsbuild und Überprüfung der Anwendung
- 02Konfiguration von Umgebungsvariablen
- 03Deployment auf Vercel
- 04Produktive Datenbankverbindungen und Migrationen
- 05Containerisierung einer Next.js-Anwendung mit Docker
- 06Mehrstufiger Docker-Build
- 07Konfiguration über Docker Compose
- 08Logging, Fehleranalyse und typische Deployment-Probleme
- 09Abschluss und Weiterentwicklung der Beispielanwendung
Für wen ist der Workshop geeignet?
Zielgruppe
- ✓Du entwickelst React-Anwendungen und möchtest vollständige Fullstack-Anwendungen mit Next.js umsetzen
- ✓Du möchtest Server Components, Server Actions und den App Router sicher einsetzen
- ✓Du planst datenbankgestützte Webanwendungen mit Authentifizierung und geschützten Bereichen
- ✓Du möchtest Next.js-Anwendungen produktiv über Vercel oder Docker bereitstellen
Voraussetzungen
- ✓Sichere Grundlagen in HTML5 und CSS3
- ✓Gute JavaScript- und TypeScript-Kenntnisse
- ✓Praktische Erfahrung mit React, funktionalen Komponenten und Hooks
- ✓Grundkenntnisse zu HTTP, REST und relationalen Datenbanken sind hilfreich
Was Sie mitnehmen
Über den Trainer
Manuel Kübler
Manuel Kübler ist freiberuflicher Full-Stack-Entwickler und IT-Trainer mit über 12 Jahren Projekterfahrung in der Softwareentwicklung. Er begleitet Unternehmen als Entwickler und Berater – von der Konzeption moderner Webanwendungen bis hin zur Anbindung und Erweiterung von ERP-Systemen. Seine Schwerpunkte liegen in der Entwicklung mit React, Vue.js, Angular, Laravel und Node.js sowie in der SAP Business One-Entwicklung mit C# und dem coresuite Country Package. Als erfahrener Trainer konzipiert und leitet er Intensivschulungen für Softwareunternehmen und Hochschulen zu Themen wie React, Vue.js, Laravel, Git, ASP.NET und weiteren modernen Technologien. Seine Beispielprojekte und Lehrmaterialien sind auf GitHub unter SoftwareDesign-Solution öffentlich einsehbar.