Next.js

Next.js ist ein quelloffenes Webframework, mit welchem sich React-basierte Web-Anwendungen mit serverseitigem Rendering entwickeln lassen sowie ein Statische-Website-Generator.

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]

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]

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.

• 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 getServerSideProps bereit, 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]

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]

• Mohit Thakkar: Building React Apps with Server-Side Rendering Apress, Berkeley (Kalifornien) 2020, ISBN 978-1-4842-5868-2, S. 93–137.

1. ↑ github.com.
2. ↑ registry.npmjs.com. In: npmjs. (abgerufen am 1. März 2023).
3. ↑ Start a New React Project. In: react.dev. Abgerufen am 24. Mai 2024 (englisch). 
4. ↑ ^{a b} Stack Overflow Developer Surveys. In: Stack Overflow. Abgerufen am 23. Mai 2024 (englisch). 
5. ↑ Next.js Brand Guidelines. In: nextjs.org. Abgerufen am 24. Mai 2024 (englisch). 
6. ↑ Next.js Release 1.0.0. In: GitHub. 25. Oktober 2016, abgerufen am 24. Mai 2024 (englisch). 
7. ↑ Next.js 13. In: nextjs.org. 25. Oktober 2022, abgerufen am 24. Mai 2024 (englisch). 
8. ↑ Frederic Lardinois: Vercel acquires Turborepo. In: TechCrunch. 9. Dezember 2021, abgerufen am 21. Mai 2024 (englisch). 
9. ↑ Maika Möbus: JavaScript-Framework: Next.js 13 beschleunigt mit Webpack-Nachfolger Turbopack. In: heise online. 26. Oktober 2022, abgerufen am 24. Mai 2024. 
10. ↑ ^{a b c} Mohit Thakkar: Building React Apps with Server-Side Rendering. Apress, Berkeley (Kalifornien) 2020, ISBN 978-1-4842-5868-2, S. 99–137, doi:10.1007/978-1-4842-5869-9_3 (englisch). 
11. ↑ Rendering: Static Site Generation (SSG). In: Next.js. Abgerufen am 21. Oktober 2025 (englisch). 
12. ↑ Rendering: Server-side Rendering (SSR). In: Next.js. Abgerufen am 21. Oktober 2025 (englisch). 
13. ↑ Next.js. 1. September 2025, abgerufen am 21. Oktober 2025 (englisch). 
14. ↑ Showcase. In: nextjs.org. Abgerufen am 23. Mai 2024 (englisch).