React liefert die Bausteine. Next.js baut daraus ein vollständiges Fundament. Routing, serverseitiges Rendering, API-Routes, Optimierung – alles inklusive, nichts selbst konfigurieren.
React ist eine UI-Bibliothek, kein vollständiges Framework. Es löst das Problem der Komponentendarstellung – aber nicht Routing, Datenabruf, SEO oder Build-Optimierung. Wer eine produktionsreife Anwendung mit React baut, muss diese Lücken selbst schließen oder ein Framework wählen. Next.js schließt sie alle auf einmal.
Eine der größten Stärken von Next.js ist die Flexibilität beim Rendering. Für jede Seite kann die optimale Strategie gewählt werden:
| Strategie | Wann gerendert? | Ideal für | Performance |
|---|---|---|---|
| SSG | Einmalig beim Build | Landingpages, Blogposts, Dokumentation | Sehr hoch – statisches HTML |
| ISR | Beim Build + periodisch im Hintergrund | Produktseiten, News, häufig aktualisierte Inhalte | Hoch – gecachtes HTML mit Ablaufdatum |
| SSR | Bei jeder Anfrage auf dem Server | Nutzerspezifische Inhalte, Dashboards, Auth-Seiten | Mittel – Server-Latenz bei jeder Anfrage |
| CSR | Im Browser des Nutzers | Hochinteraktive Bereiche, die kein SEO benötigen | Variabel – abhängig von Client-Hardware |
In modernen Next.js-Projekten mit dem App Router werden die meisten Seiten als React Server Components gerendert – serverseitig, ohne JavaScript im Browser. Client-seitige Interaktivität wird gezielt mit der Direktive "use client" aktiviert. Das Ergebnis sind schlankere Bundles und bessere Performance.
Next.js gibt eine klare Ordnerstruktur vor – Konvention statt Konfiguration. Wer die Struktur kennt, findet sich in jedem Next.js-Projekt sofort zurecht:
Jeder Ordner entspricht einem URL-Segment. app/blog/page.tsx ergibt die Route /blog. Layouts, Loading- und Error-States werden als eigene Dateien daneben gelegt.
Bilder, Fonts und andere statische Assets landen hier. Dateien in public/ sind direkt über die URL erreichbar – public/logo.svg ist unter /logo.svg abrufbar.
Wiederverwendbare UI-Komponenten werden hier abgelegt. Nicht von Next.js vorgegeben, hat sich aber als Konvention in der Community etabliert.
Zentrale Konfigurationsdatei für Weiterleitungen, Header, Bilddomänen, Umgebungsvariablen und erweiterte Build-Einstellungen.
Für rein statische Seiten ohne JavaScript-Interaktivität kann ein einfacherer Static-Site-Generator wie Astro effizienter sein. Für hochkomplexe SPAs ohne SEO-Anforderungen reicht reines React mit Vite. Next.js ist ein mächtiges Framework – wer es für eine einfache Visitenkarten-Website einsetzt, wählt möglicherweise das falsche Werkzeug.
Der Pages Router ist das ältere Routing-System von Next.js, bei dem Seiten im pages/-Verzeichnis abgelegt werden. Der App Router wurde mit Next.js 13 eingeführt und nutzt das app/-Verzeichnis mit React Server Components, verschachtelten Layouts und verbessertem Datenabruf. Beide Systeme können im selben Projekt parallel existieren. Für neue Projekte empfiehlt Vercel den App Router.
Nein – Next.js funktioniert mit JavaScript und TypeScript gleichermaßen. TypeScript wird jedoch dringend empfohlen: Next.js bietet erstklassigen TypeScript-Support mit automatischer Typgenerierung für Routen und Konfiguration. Bei mittleren und größeren Projekten reduziert TypeScript Fehler erheblich und verbessert die Wartbarkeit. Wer neu anfängt, sollte TypeScript von Beginn an mitdenken.
Ja. Next.js kann auf jedem Node.js-fähigen Server betrieben werden – auf einem VPS, über Railway, Render, AWS oder selbst gehostet. Einige fortgeschrittene Features wie ISR und Edge Functions laufen auf Vercel jedoch reibungsloser und ohne zusätzliche Konfiguration. Wer auf einer anderen Plattform hostet, sollte prüfen, welche Next.js-Features dort vollständig unterstützt werden.
React Server Components (RSC) sind eine Erweiterung von React, bei der Komponenten vollständig auf dem Server ausgeführt werden – ohne JavaScript-Overhead im Browser. Next.js war das erste Framework, das RSC in einer stabilen, produktionsreifen Form implementiert hat. Im App Router sind alle Komponenten standardmäßig Server Components. Client-seitige Interaktivität wird explizit mit der Direktive "use client" aktiviert.
Next.js ist ausgezeichnet für SEO geeignet. Durch SSR und SSG wird fertiges HTML ausgeliefert, das Suchmaschinen-Crawler ohne JavaScript-Ausführung vollständig lesen können. Dazu bietet Next.js eine Metadata API für Title, Description, Open Graph und strukturierte Daten direkt in der Komponente. In Verbindung mit automatischer Bildoptimierung und guten Core Web Vitals ist Next.js eine der SEO-freundlichsten Optionen für React-basierte Projekte.