Uebersicht
Was du in diesem Tutorial lernst
Dieses Tutorial fuehrt dich in 13 Modulen durch Next.js – von der lokalen Entwicklungsumgebung bis zum produktiven Deployment. Jedes Modul enthaelt Erklaerungen, Rails-Analogien und eine Live-Demo in der DevNotes-App.
Node.js, TypeScript und Next.js installieren. Projektstruktur, Konfigurationsdateien und den Entwicklungsserver verstehen.
JSX-Syntax, funktionale Komponenten, Props und die wichtigsten Hooks – erklaert mit Blick auf Rails-Konzepte wie Partials und Helper.
File-System-Routing im App Router: Layout-Dateien, dynamische Segmente, Catch-All-Routen und die Link-Komponente.
Das Kernkonzept von Next.js: welche Komponenten auf dem Server rendern, welche im Browser – und warum das die Rails-View-Welt grundlegend veraendert.
Daten direkt in Server Components mit async/await laden. Suspense-Boundaries, Streaming und parallele Requests.
Schema mit Prisma definieren, Migrationen ausfuehren, den generierten Client nutzen – das Rails-Active-Record-Aequivalent fuer TypeScript.
Formulare und Datenmutationen mit Server Actions: kein API-Endpunkt noetig. Optimistische Updates und Fehlerbehandlung.
Request-Memoization, Data-Cache, Full-Route-Cache. revalidatePath und revalidateTag gezielt einsetzen.
Tailwind v4 im App Router, next/image fuer optimierte Bilder, next/font fuer webfont-Laden ohne Layout-Shift.
Session-basierte Authentifizierung mit iron-session: Login, Logout, geshuetzte Routen via Middleware.
REST-Endpunkte mit Route Handlers bauen: Request/Response-Web-APIs, JSON-Antworten, Methoden-Handling.
Unit-Tests mit Vitest, Komponenten-Tests mit React Testing Library und End-to-End-Tests mit Playwright.
Docker-Image mit Standalone-Output bauen und ueber Coolify selbst hosten – der komplette Weg von Code zu Production.