Was ist Next.js?

Was ist Next.js?

Next.js ist ein produktionsreifes React-Meta-Framework, entwickelt und gepflegt von Vercel. "Meta-Framework" bedeutet, es sitzt auf React (der UI-Library) und fügt die Produktions-Belange hinzu, die React selbst nicht shippt: Routing, Server-Side-Rendering, Build-Optimierung, Bild-Handling, Font-Loading, API-Routes, Deployment-Integration. Stand 2026 ist Next.js das De-facto-Standard für ernsthafte React-Anwendungen — gewählt von Vercel selbst, OpenAI, Notion, TikTok, Twitch, GitHub Copilot und dem Stripe-Dashboard.

Die aktuelle Hauptversionslinie ist Next.js 14/15+ (2024-2026), gebaut um den App Router (das neue Routing-System, das React Server Components integriert) und den Turbopack-Dev-Server. Der frühere Pages Router (Next.js 12 und darunter) wird weiterhin für Legacy-Projekte unterstützt, aber keine neue Entwicklung sollte ihn anvisieren.

Das Hybrid-Rendering-Modell

Next.js' Killer-Feature ist das Mischen von Rendering-Strategien pro Route innerhalb einer einzigen Anwendung. Wähle den richtigen Rendering-Modus für jede Seite:

SSR (Server-Side Rendering)

Seite wird auf dem Server für jeden Request gerendert. Am besten für personalisierten Content (eingeloggte Dashboards) oder Seiten, wo die Daten sich pro Besuch ändern. Erhöht TTFB, aber gewährleistet frischen Content.

SSG (Static Site Generation)

Seite wird zur Build-Zeit gerendert und als statische Datei ausgeliefert. Schnellster möglicher TTFB, skaliert zu Milliarden von Requests via CDN. Am besten für Marketing-Seiten, Blogs, Docs. Erfordert einen Rebuild zum Updaten.

ISR (Incremental Static Regeneration)

Hybrid: Seiten sind statisch, aber Next regeneriert sie im Hintergrund nach einem konfigurierbaren Intervall (z.B. "alle 60 Sekunden"). Am besten für Content, der sich gelegentlich ändert (Produktseiten, News-Artikel, Listings). Kombiniert SSG-Geschwindigkeit mit SSR-Frische.

Streaming SSR mit React Server Components (RSC)

Der moderne Default des App Routers. Server-gerenderte HTML streamt zum Client, sobald sie bereit ist, mit selektiver Client-seitiger Hydration für interaktive Komponenten. Am besten für komplexe Daten-Fetching-Apps, wo manche Sektionen länger brauchen als andere.

Static-only Client-Side Rendering (CSR)

Pre-gerenderte Shell + Client-seitiges Daten-Fetching. Genutzt für hochinteraktive Routen (Dashboards), wo SEO nicht zählt und du SPA-Feel-Navigation willst.

Der App Router (Next.js 13+)

Der App Router brachte React Server Components zur Mainstream-React-Entwicklung. Schlüsselkonzepte:

• Server-Components als Default. Komponenten fetchen Daten auf dem Server, rendern zu HTML und shippen kein JavaScript an den Browser. Das ist der größte Bundle-Größen-Gewinn seit Jahren.
• Client-Components opt-in via 'use client'-Direktive. Genutzt für interaktive Teile (Formulare, Click-Handler, useState).
• Datei-basiertes Routing via das app/-Verzeichnis. app/blog/[slug]/page.tsx bedient /blog/.
• Layouts via layout.tsx-Dateien. Persistent über Navigationen innerhalb ihres Subtrees.
• Loading- und Error-UI via loading.tsx und error.tsx. Automatische Suspense-Boundaries.
• Server Actions für Mutationen: definiere eine Server-Funktion, rufe sie von einer Client-Komponente auf, keine API-Route nötig.
• Parallele Routes und Intercepting-Routes für fortgeschrittene Layouts (Modals, Side-by-Side-Panels).

Was in der Box shippt

• Datei-basiertes Routing — Verzeichnisstruktur = URL-Struktur.
• Bild-Optimierung via <Image /> — automatisch WebP/AVIF, responsive Größen, Lazy-Loading, CDN-Integration.
• Font-Optimierung via next/font — selbst-gehostete Google Fonts mit Null-Layout-Shift.
• API-Routes / Route-Handlers — Backend-Endpoints im gleichen Projekt. Edge-Runtime-kompatibel.
• Middleware — läuft am Edge vor Routen. Auth, A/B-Tests, Geolocation-Routing.
• Eingebaute CSS-Unterstützung — Module, Tailwind, Sass, CSS-in-JS-Adapter.
• TypeScript als Default — Type-Safe-Routing, Server-Actions, Layouts.
• Turbopack — Rust-basierter Dev-Server (ersetzt webpack), 2026 noch stabilisierend.
• Internationalisierung (i18n) — eingebautes Routing für Locale-präfigierte URLs.

Next.js vs. Alternativen

Häufige Next.js-Fallen

• Alles als 'use client' markieren. Negiert die Bundle-Größen-Vorteile von RSC. Lift State Up, um die meisten Komponenten Server-gerendert zu halten.
• Falsche Cache-Annahmen. Next 13+ hat aggressives Default-Caching; Routen, die dynamisch sein sollten, werden statisch gerendert. Nutze dynamic = 'force-dynamic' oder revalidate explizit.
• App Router und Pages Router falsch mischen. Sie können während Migration koexistieren, aber konflikthafte Routen brechen still. Migriere vollständig, wenn du kannst.
• Vergessen von <Image />. Natives <img> umgeht Nexts Optimierung. Nutze immer next/image für Bilder.
• Schwere Nutzung dynamischer Imports für kleine Komponenten. Jeder dynamische Import ist ein Netzwerk-Round-Trip. Reserviere für genuinely große Bundles.
• Vercel-only-Features. Manche Features (Edge-Middleware, ISR) funktionieren überall, sind aber Vercel-getuned. Selbst-gehostetes Next.js funktioniert gut, aber du implementierst die Deployment-Klempnerei.
• Über-Fetching in Layouts. Ein Layout-Fetch läuft bei jeder Seiten-Navigation darunter. Lift Fetches in spezifische Routen, wenn möglich.

Next.js deployen

• Vercel — first-party. Zero-Config-Deploys, alle Features funktionieren. Der Default für neue Next.js-Apps.
• Selbst-gehostet (Node) — next build + next start. Alle Features unterstützt. Nutze, wenn du auf AWS/GCP/Azure mit voller Kontrolle laufen musst.
• Selbst-gehostet (Docker) — offizieller Guide für containerisiertes Next.js. Häufig im Enterprise.
• Static Export — output: 'export' generiert eine vollständig statische Site. Verliert ISR/Server-Actions/API-Routes, deployt aber zu jedem CDN.
• Cloudflare Pages, Netlify, AWS Amplify — Drittanbieter-Plattformen mit Next.js-Adaptern. Die meisten Features funktionieren mit Vorbehalten.

FAQ: Next.js

Sollte ich App Router oder Pages Router für neue Projekte nutzen?

App Router. Der Pages Router ist im Maintenance-Modus. App Router ist die Zukunft von Next.js und bekommt neue Features.

Ist Next.js nur für React?

Ja — Next.js ist React-spezifisch. Vue hat Nuxt; Svelte hat SvelteKit; Solid hat Solid Start. Jedes Meta-Framework spezialisiert sich auf seine UI-Library.

Brauche ich Vercel, um Next.js zu nutzen?

Nein. Next.js ist Open-Source und selbst-hostbar. Vercel ist das Unternehmen, das es pflegt (und das Default-Hosting anbietet), aber das Framework funktioniert überall, wo Node läuft. ~50% großer Next.js-Apps sind nicht auf Vercel.

Was ist der Bundle-Größen-Impact von Next.js?

Das Framework fügt ~70-90KB gzipped zu deinem initialen JS hinzu. RSC und selektive Hydration im App Router reduzieren das signifikant für den Nutzer, da viele Komponenten gar kein JavaScript shippen.

Wie handhabt Next.js SEO?

Hervorragend — Next.js wurde für SEO gebaut. SSR/SSG gewährleisten, dass Seiten crawlable sind. Eingebaute Metadata-API generiert <title>, <meta>, OpenGraph, JSON-LD. Bild- und Font-Optimierung verbessert Core Web Vitals.

Kann ich Next.js mit TypeScript nutzen?

Next.js shippt mit TypeScript als Default; create-next-app generiert ein TypeScript-Projekt, es sei denn, du optest aus. Die APIs des Frameworks sind end-to-end Type-Safe.

Was ist Turbopack?

Vercels Rust-basierter Bundler, der webpack im Next.js-Dev-Modus ersetzt. Stabilisiert sich noch in Production-Builds (2026). Signifikant schnellere Cold-Starts und HMR.

Wie LoadFocus zu Next.js-Anwendungen steht

Next.js-Apps profitieren von Server-seitiger Optimierung, hängen aber weiterhin von Backend-Latenz für SSR-Routen und von Edge-Cache-Hit-Raten für ISR ab. LoadFocus-Website-Speed-Testing misst Core Web Vitals auf deiner deployed Next.js-App von 30+ Standorten. Lasttest validiert, dass SSR-Endpoints und Server-Actions unter realistischem konkurrenten Traffic durchhalten — der Teil der App, der nicht via Static-Caching auto-skaliert.