Next.js

Definition

Next.js ist ein von Vercel entwickeltes React-Meta-Framework, das Server-Side Rendering (SSR), Static Site Generation (SSG) und weitere Produktionsfeatures direkt mitbringt. Es löst viele typische Probleme von reinen React-SPAs, insbesondere in Bezug auf SEO und Performance. Next.js ist aktuell eines der meistgenutzten Web-Frameworks für React-basierte Projekte.

Erläuterung

Next.js bietet verschiedene Rendering-Strategien: Statische Generierung (SSG) für vorab gerenderte Seiten, Server-Side Rendering (SSR) für dynamische Inhalte, Incremental Static Regeneration (ISR) für automatische Aktualisierung statischer Seiten und Client-Side Rendering (CSR) für interaktive Komponenten. Der App Router (seit Next.js 13) basiert auf React Server Components und ermöglicht granulares Rendering auf Komponentenebene. Datei-basiertes Routing macht Next.js besonders intuitiv: Jede Datei im app/-Verzeichnis wird automatisch zur Route. Next.js optimiert Bilder, Schriften und Skripte automatisch und verbessert dadurch die Core Web Vitals erheblich. Die Integration mit Vercel, aber auch anderen Hosting-Plattformen wie AWS oder eigenen Servern (via Docker), ist unkompliziert und flexibel.

Praxistipp: Nutzen Sie die Next.js Image-Komponente für alle Bilder, da sie automatisch optimale Bildformate (WebP, AVIF) und Grössen generiert und Lazy Loading von Haus aus unterstützt. Für Marketing-Seiten mit häfig wechselnden Inhalten empfiehlt sich Incremental Static Regeneration, da es die Performance statischer Seiten mit der Aktualität dynamischer Seiten verbindet.