Definition
Next.js ist ein Open-Source-Framework für React-Anwendungen, entwickelt und gepflegt von Vercel. Es ergänzt React um serverseitige Funktionalität: Server-Side Rendering (SSR), Static Site Generation (SSG), inkrementelle statische Regenerierung (ISR), API-Routes und dateibasiertes Routing.
Bedeutung
Next.js löst ein zentrales Problem reiner React-Anwendungen: SEO und initiale Ladezeit. Während clientseitig gerenderte React-Apps für Suchmaschinen schwer indexierbar sind, liefert Next.js fertig gerendertes HTML aus. Für Unternehmen, deren Website sowohl interaktiv als auch suchmaschinenoptimiert sein muss, ist Next.js eine der verbreitetsten Architekturentscheidungen.
Funktionsweise
Next.js verwendet ein dateibasiertes Routing-System: Jede Datei im /app-Verzeichnis (seit Version 13) wird automatisch zu einer Route. Entwickler entscheiden pro Seite, ob sie serverseitig (SSR), statisch (SSG) oder clientseitig gerendert wird. Bei SSR generiert der Server das HTML bei jeder Anfrage. Bei SSG wird das HTML einmalig beim Build erzeugt und als statische Datei ausgeliefert. ISR kombiniert beides — statische Seiten werden nach einem definierten Intervall im Hintergrund neu generiert. API-Routes erlauben es, Backend-Logik (Datenbankzugriffe, Authentifizierung) direkt innerhalb des Next.js-Projekts zu implementieren.
Praxisbeispiel
Ein B2B-Softwareunternehmen betreibt seine Marketing-Website und Dokumentation als Next.js-Anwendung. Marketing-Seiten werden statisch generiert (SSG) für maximale Ladegeschwindigkeit, die Dokumentation nutzt ISR für automatische Aktualisierung, und ein Kontaktformular verwendet eine API-Route für serverseitige Validierung und CRM-Anbindung.
Verwandte Begriffe
- React: Die JavaScript-Bibliothek, auf der Next.js aufbaut.
- Server-Side Rendering (SSR): Das Erzeugen von HTML auf dem Server bei jeder Anfrage, im Gegensatz zu clientseitigem Rendering im Browser.
- Static Site Generation (SSG): Das Vorerzeugen von HTML-Seiten beim Build-Prozess, die dann als statische Dateien ausgeliefert werden.