Zum Inhalt springen

Next.js

aus Wikipedia, der freien Enzyklopädie
Next.js

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
Programmier­sprache JavaScript, TypeScript, Rust
Kategorie Webframework
Lizenz MIT
nextjs.org

Next.js ist ein quelloffenes Webframework, mit welchem sich React-basierte Web-Anwendungen mit serverseitigem Rendering entwickeln lassen sowie ein statischer 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]

Historie

[Bearbeiten | Quelltext bearbeiten]

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

[Bearbeiten | Quelltext bearbeiten]

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

[Bearbeiten | Quelltext bearbeiten]
  • 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]

Rezeption

[Bearbeiten | Quelltext bearbeiten]

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

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

Einzelnachweise

[Bearbeiten | Quelltext bearbeiten]
  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).
Abgerufen von „https://de.wikipedia.org/w/index.php?title=Next.js&oldid=262493853“