React und Next.js sind nicht dasselbe. React liefert die UI-Bausteine und die Prinzipien ihrer Aktualisierung. Next.js bündelt die gemeinsamen Entscheidungen, mit diesen Bausteinen eine Webanwendung mit mehreren Adressen zu erstellen und zu betreiben.
§ 00 · React ist eine Bibliothek, Next.js ein Framework
Eine Bibliothek stellt Werkzeuge für ein bestimmtes Problem bereit und überlässt die übrige Anwendungsstruktur dem Entwickler. Reacts Kernaufgabe besteht darin, UI durch Komponenten auszudrücken und bei Datenänderungen zu aktualisieren.
Ein Framework liefert Regeln und eine Laufzeitumgebung für die gesamte Anwendung. Next.js verwendet React als Renderer und bündelt dateibasiertes Routing, Layouts, Ausführungsgrenzen zwischen Server und Client, Datenverarbeitung sowie die Grundstruktur für Build und Deployment. Es ersetzt React nicht, sondern bildet eine darüberliegende Schicht, die React einschließt und organisiert.
§ 01 · Entscheidungen, die nach React noch offenbleiben
Mit React allein lässt sich eine Browseroberfläche bauen. Die React-Kern-API legt jedoch nicht einheitlich fest, wie URLs mehrerer Seiten definiert werden, ob die erste Ansicht auf dem Server oder im Browser entsteht, wo Daten gelesen werden, wie Code für die Auslieferung aufgeteilt wird oder welches HTML Suchmaschinen und Vorschaukarten erhalten.
Entwickler können Router und Build-Werkzeuge selbst kombinieren oder ein Framework wählen, das diese Entscheidungen bündelt. Next.js steht für den zweiten Weg. React und Next.js zu lernen überschneidet sich deshalb, ist aber nicht identisch. JSX und State gehören zur Sprache von React; Regeln wie page, layout und route zu Next.js.
§ 02 · Was Next.js ergänzt
Routing verbindet Ordner und besondere Dateien mit URLs und Ansichten. Layouts definieren die gemeinsame Hülle mehrerer Seiten. Beim Rendering können Seiten im Voraus oder auf Anfrage auf dem Server entstehen; nötige Interaktionen übernimmt anschließend der Browser.
Außerdem fasst es serverseitigen Datenzugriff, Lade-, Fehler- und 404-Oberflächen, Bild- und Schriftoptimierung, Code-Aufteilung, Metadaten und Server-Endpunkte in einem System zusammen. Nicht jede Funktion muss verwendet werden. Entscheidend ist, dass das Framework potenziell widersprüchliche Werkzeugentscheidungen in gemeinsame Regeln überführt.
| Schicht | Hauptaufgabe |
|---|---|
| React | Komponenten, JSX, Props, State, Hooks und UI-Aktualisierung |
| Next.js | Routing, Layouts, Rendering-Strategien, Servergrenzen und Build-System |
| Anwendung | Domänenregeln, Datenmodelle, Benutzererfahrung und Betriebsrichtlinien |
§ 03 · Server und Client als einen Komponentenbaum betrachten
Im App Router von Next.js sind Seiten und Layouts standardmäßig Komponenten, die auf dem Server ausgeführt werden. Server Components eignen sich dafür, nahe an der Datenquelle zu lesen, Geheimnisse vom Browser fernzuhalten und die übertragene JavaScript-Menge zu reduzieren.
Client Components übernehmen Teile, die State, Ereignishandler, useEffect oder Browser-APIs benötigen. „use client“ markiert eine Datei als Grenze des browserseitigen Modulgraphen. Server und Client Components stehen nicht in Konkurrenz: Sie teilen statische und interaktive Arbeit innerhalb eines Baums auf.
§ 04 · Eine wichtige Kombination, aber nicht die einzige
Für Websites mit mehreren URLs, Serverdaten, Suchsichtbarkeit, Metadaten zum Teilen, statischer Generierung und Server-Rendering löst die Kombination von React und Next.js viele Entscheidungen auf einmal. Ihr Vorteil ist eine Struktur für die ganze Anwendung, während Reacts Komponentenmodell erhalten bleibt.
Für ein kleines Widget, eine Übungsansicht oder ein einfaches Werkzeug, das nur im Browser läuft, genügt dagegen React allein; auch andere Build-Werkzeuge oder Frameworks sind möglich. Next.js macht eine App nicht automatisch gut. Ein Framework beseitigt Entscheidungen nicht, sondern reduziert wiederkehrende Entscheidungen durch Vorgaben und Regeln.
Beitrag lesen: sass.studio.