NEXT.JS · FRAMEWORK LAYER
NOTES — ED. 2026.08
React zeichnet die Oberfläche; Next.js legt die Wege der App an.
Ein Framework über der Bibliothek.
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.
FIG. 01REACT FOR UI — NEXT.JS FOR THE APPLICATION
REACTNEXT.JS
React ist eine Bibliothek, Next.js ein Framework
FRAMEWORK · 2026Eine 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.
WHAT REACT DOESWHAT AN APP STILL NEEDS
Entscheidungen, die nach React noch offenbleiben
APPLICATION · 2026Mit 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.
ROUTING · RENDERINGDATA · BUILD
Was Next.js ergänzt
NEXT.JS · 2026Routing 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.
SchichtHauptaufgabe
React
Hauptaufgabe
Komponenten, JSX, Props, State, Hooks und UI-AktualisierungNext.js
Hauptaufgabe
Routing, Layouts, Rendering-Strategien, Servergrenzen und Build-SystemAnwendung
Hauptaufgabe
Domänenregeln, Datenmodelle, Benutzererfahrung und BetriebsrichtlinienSERVER COMPONENTSCLIENT COMPONENTS
Server und Client als einen Komponentenbaum betrachten
SERVER & CLIENT · 2026 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.
A CHOICE, NOT A REQUIREMENTTRADE-OFFS
Eine wichtige Kombination, aber nicht die einzige
TRADE-OFFS · 2026 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.
— FIN —