Was ist Next.js? Das React-Framework erklärt

Was ist Next.js?

Next.js ist ein React-Framework zum Bau von Full-Stack-Webanwendungen. Sie schreiben die Oberfläche mit React-Komponenten, und Next.js ergänzt Routing, Server-Rendering, Datenabruf, Caching, Bild- und Schriftverarbeitung und ein Build-Werkzeug, sodass Sie diese Bausteine nicht selbst zusammenstellen müssen. Entwickelt wird es von Vercel, betreiben können Sie es auf einem Node.js-Server, in einem Docker-Container oder auf einer Plattform.

Versionen und Router

Zum Zeitpunkt dieses Textes (Oktober 2026) ist Next.js 16.4 die aktuelle Version, veröffentlicht am 6. Oktober 2026. Mit Next.js 16 wurde Turbopack zum Standard-Bundler, proxy.ts ersetzt middleware.ts, und Node.js 20.9 oder neuer ist Pflicht. Die aktuelle Dokumentation beschreibt zwei Router: den App Router, der neuere React-Funktionen wie Server Components unterstützt, und den ursprünglichen Pages Router, der weiterhin unterstützt wird. Neue Projekte starten mit dem App Router. Lesen Sie die offizielle Dokumentation zu Ihrer Version, denn Standardwerte haben sich zwischen Releases geändert.

Wie Next.js Seiten rendert

Next.js lässt Sie für jede Route wählen, wie sie gerendert wird, statt eine Strategie für die ganze App vorzugeben:

• Statisches Rendering (Prerendering): Die Seite wird vorab gebaut und als Datei ausgeliefert. Das ist am günstigsten und passt gut hinter ein CDN. Siehe Static Site Generation.
• Dynamisches Rendering: Die Seite wird bei jeder Anfrage auf dem Server gerendert, passend für personalisierte Seiten. Siehe Server-Side Rendering.
• Incremental Static Regeneration (ISR): Eine statische Seite wird nach einer festgelegten Zeit oder auf Abruf im Hintergrund neu erzeugt. Die erste Anfrage nach Ablauf des Intervalls bekommt noch die zwischengespeicherte Seite, während die neue entsteht.
• Streaming: Der Server sendet die Seite in Teilen, sobald jeder Teil fertig ist, sodass langsame Daten nicht die ganze Seite aufhalten.
• Cache Components: Ein neueres Modell, bei dem Sie Teile einer Seite mit 'use cache' markieren und der Rest zur Anfragezeit gerendert wird. Next.js 16.4 empfiehlt es für jede App und aktiviert es bei neuen Apps, die mit create-next-app erstellt werden. Laut Team wird es in Next.js 17 zum Standard.

Server und Client Components

Im App Router sind Layouts und Seiten standardmäßig Server Components. Sie laufen auf dem Server, können Datenbanken lesen und Geheimnisse nutzen und senden keinen Komponentencode an den Browser. Fügen Sie einer Datei die Direktive 'use client' hinzu, wenn sie Zustand, Event-Handler oder Browser-APIs braucht. Der Browser erhält dann HTML für eine schnelle erste Ansicht und JavaScript, das die interaktiven Teile hydriert. Setzen Sie 'use client' auf kleine interaktive Komponenten und nicht auf ganze Seitenbäume, damit das JavaScript-Bundle klein bleibt.

Ein kleines Beispiel

Diese Seite im App Router wird für jeden Blogbeitrag vorab gerendert und höchstens einmal pro Stunde neu erzeugt:

// app/blog/[slug]/page.tsx
export const revalidate = 3600 // regenerate at most once an hour

export async function generateStaticParams() {
  const posts = await fetch('https://example.com/api/posts').then((r) => r.json())
  return posts.map((p) => ({ slug: p.slug }))
}

export default async function Page({ params }) {
  const { slug } = await params
  // ...fetch the post and render it on the server
}

Häufige Next.js-Fehler

• Alles mit 'use client' markieren. Das zieht den ganzen Teilbaum ins Browser-Bundle und hebt den Vorteil der Server Components auf.
• Die Cache-Regeln einer älteren Version annehmen. Die Standardwerte haben sich zwischen Releases verschoben, und Cache Components machen Caching zur Option. Lesen Sie den Leitfaden zu Ihrer Version und testen Sie mit einem Produktions-Build.
• ISR überall erwarten. ISR braucht die Node.js-Runtime und wird bei einem statischen Export nicht unterstützt. Bei mehreren Server-Instanzen gilt der Standard-Cache pro Instanz, daher brauchen Sie einen gemeinsamen Cache-Handler.
• Updates auslassen. Das Next.js-Team veröffentlicht regelmäßig Sicherheitsreleases. Setzen Sie eine gepatchte Version ein und verfolgen Sie die Release Notes.
• Ein einfaches Bild-Tag verwenden. Die Komponente next/image skaliert und cached Bilder für Sie, ein rohes img nicht.

Next.js, Performance und Lasttests

Die Art des Renderings entscheidet, wo die Kosten anfallen. Eine statische Seite ist pro Anfrage billig, eine dynamisch gerenderte verbraucht bei jedem Besuch Server-CPU, sodass sich ihre Time to First Byte und ihre Kapazität unter Last verändern. Genau das zeigt ein Lasttest: Steigern Sie die virtuellen Benutzer gegen Ihre dynamischen Routen und API-Routen und beobachten Sie Antwortzeit und Fehler. Vergleichen Sie eine gecachte Route mit einer ungecachten, um den Nutzen des Cachings zu sehen.

Auf der Nutzerseite verfolgt das Page-Speed-Monitoring nach jedem Deployment Core Web Vitals wie den Largest Contentful Paint, und der kostenlose Core-Web-Vitals-Checker liefert einen schnellen Wert für eine URL. Unser Leitfaden zu Performance-Budgets für Web-Apps (auf Englisch) zeigt, wie Sie aus diesen Zahlen Grenzwerte machen. Wenn Sie mit Vue arbeiten, ist Nuxt das Gegenstück, und React ist die Bibliothek unter Next.js.

Häufige Fragen zu Next.js

Ist Next.js ein Framework oder eine Bibliothek?

Next.js ist ein Framework auf Basis von React. React ist die Bibliothek für die Oberfläche, Next.js ergänzt Routing, Rendering, Caching und Werkzeuge darum herum.

Wer entwickelt Next.js?

Vercel entwickelt Next.js, der Code ist auf GitHub quelloffen. Sie können es bei Vercel oder auf eigener Infrastruktur betreiben.

Was ist der Unterschied zwischen App Router und Pages Router?

Der App Router ist der neuere Router. Er unterstützt React Server Components, verschachtelte Layouts und Streaming. Der Pages Router ist der ursprüngliche und wird weiterhin unterstützt. Bei einer Migration können beide in einem Projekt nebeneinander existieren.

Ist Next.js gut für SEO?

Das kann es sein, weil Seiten auf dem Server oder beim Build zu HTML gerendert werden können, sodass Crawler Inhalte erhalten, ohne Ihr JavaScript auszuführen. Gute Ergebnisse hängen trotzdem von schnellen Seiten, sauberen Metadaten und nützlichen Inhalten ab.

Brauche ich Vercel, um Next.js zu hosten?

Nein. Next.js läuft auf einem Node.js-Server oder in einem Docker-Container, und Plattformen können es über Adapter unterstützen. Funktionen wie ISR erfordern dann das in der Self-Hosting-Dokumentation beschriebene Setup, zum Beispiel einen gemeinsamen Cache bei mehr als einer Instanz.