Next.js
From Wikipedia, the free encyclopedia
Next.js ist ein quelloffenes Webframework, mit welchem sich React-basierte Web-Anwendungen mit serverseitigem Rendering entwickeln lassen sowie ein statischer Website-Generator.
| Next.js | |
|---|---|
 | |
| Basisdaten | |
| Hauptentwickler | Vercel |
| Entwickler | Vercel Inc. und die Open Source Community |
| Erscheinungsjahr | 25. Oktober 2016 |
| Aktuelle Version | 16.0.10 (12. Dezember 2025) |
| Aktuelle Vorabversion | 13.1.7-canary.0[1][2] (30. Januar 2023) |
| Betriebssystem | Plattformunabhängig |
| Programmiersprache | JavaScript, TypeScript, Rust |
| Kategorie | Webframework |
| Lizenz | MIT |
| nextjs.org | |
Während der Inhalt traditioneller React-Anwendungen nur im Webbrowser gerendert werden kann, ermöglicht es Next.js, das Rendering direkt auf dem Webserver vorzunehmen, behält aber gleichzeitig die Möglichkeit, Seiten oder einzelne Komponenten weiterhin im Webbrowser zu rendern.
Next.js ist eines der in der Dokumentation von React empfohlenen Frameworks für die Entwicklung von React-Applikationen[3] und ist eines der populärsten Webframeworks.[4]
Das Framework wird hauptsächlich vom US-amerikanischen Unternehmen Vercel entwickelt, besitzt jedoch auch eine große Open-Source-Gemeinde, die sich an der Entwicklung beteiligt. Die Markenrechte an Next.js liegen bei Vercel.[5]
Historie
Die erste Version von Next.js wurde am 25. Oktober 2016 als Open-Source-Projekt auf GitHub veröffentlicht.[6]
Am 26. Oktober 2022 wurde Next.js 13 veröffentlicht, welches zahlreiche Funktionen und Verbesserungen mit sich brachte. Unter anderem wurde ein neues Routing-System mit Unterstützung für Layouts, Unterstützung für React Server Components sowie neue Möglichkeiten zum Datenabruf vorgestellt.[7] Des Weiteren wurde Unterstützung für Turborepo als inkrementelles Build-System für Monorepos hinzugefügt, welches Vercel ein Jahr zuvor akquiriert hat.[8] Auch wurde die Möglichkeit eingeführt, Webpack als Bundler optional durch den eigens von Vercel entwickelten Bundler Turbopack zu ersetzen.[9]
Hintergrund
React ist eine JavaScript-Bibliothek, mit welcher sich Web-Applikationen bauen lassen, die im Webbrowser des Nutzers mittels JavaScript in einem Virtual DOM gerendert werden.[10] Diese Vorgehensweise hat jedoch für Webseiten, die funktionell eigentlich nicht auf JavaScript angewiesen wären, zahlreiche Nachteile. Die Abhängigkeit von JavaScript sorgt zunächst dafür, dass keine Darstellung der Webseite möglich ist, wenn JavaScript im Webbrowser deaktiviert ist. Auch führt der verzögerte Seitenaufbau zu Geschwindigkeitseinbußen und Suchmaschinen können den Inhalt der Webseite nicht korrekt indizieren, was sich als erhebliches Problem in der Suchmaschinenoptimierung niederschlägt.[10]
Webframeworks wie Next.js umgehen diese Probleme, indem der Aufbau der DOM-Struktur bereits auf dem Webserver erfolgt.[10] Auf dem Webserver ist für die Verwendung von Next.js die Installation von Node.js erforderlich.
Rendering-Strategien
- Static Site Generation (SSG): Next.js kann Seiten bereits zur Build-Zeit als statische HTML-Dateien vorab generieren. Diese Seiten werden beim Deployment erstellt und dann bei Anfragen direkt ausgeliefert, was schnelle Ladezeiten ermöglicht. Einmal erstelltes HTML wird bei jedem Request wiederverwendet und kann beispielsweise über ein CDN zwischengespeichert werden. SSG eignet sich vor allem für Inhalte, die sich selten ändern.[11]
- Server-Side Rendering (SSR): Beim serverseitigen Rendering erzeugt Next.js den HTML-Inhalt für eine Seite bei jeder Nutzeranfrage dynamisch auf dem Server. Dafür stellt das Framework unter anderem die Funktion
getServerSidePropsbereit, die bei jedem Request ausgeführt wird, um benötigte Daten zu laden.[12] - Incremental Static Regeneration (ISR): Seiten können mit einem Revalidierungsintervall versehen werden (
revalidate), sodass abgelaufene (stale) Seiten bei einer Anfrage im Hintergrund neu generiert werden. Nutzer erhalten zunächst die gecachte (ggf. veraltete) Seite und Next.js aktualisiert den Inhalt im Hintergrund, sodass nachfolgende Anfragen die erneuerte Seite bekommen. Dieses Verfahren ermöglicht es, die Vorteile von Static Site Generation zu nutzen und dennoch Inhalte zeitnah zu aktualisieren, ohne jedes Mal das gesamte Projekt neu bauen zu müssen. - Client-Side Rendering (CSR): Dabei wird initial eine minimale HTML-Seite ausgeliefert und die eigentliche Darstellung durch React.js vollständig im Browser des Nutzers erzeugt. Durch Hydration werden nur die benötigten Skripte nachgeladen, um Seiten interaktiv zu machen.[13]
Rezeption
Next.js wird bei Web-Entwicklern weitläufig gelobt. Es wurde in den Stack Overflow Developer Surveys der letzten Jahre wiederholt als beliebtestes Webframework gewählt (Stand 2023).[4]
Zahlreiche große Websites verwenden Next.js. Dazu gehören unter anderem Websites von Apple, Netflix, Nike, Spotify, TikTok und Starbucks.[14]
Literatur
- Mohit Thakkar: Building React Apps with Server-Side Rendering Apress, Berkeley (Kalifornien) 2020, ISBN 978-1-4842-5868-2, S. 93–137.