Optimierung Ihrer Next.js-Anwendung für die Produktion
Bevor Sie Ihre Next.js-Anwendung in die Produktion überführen, sollten Sie einige Optimierungen und Muster implementieren, um die beste Benutzererfahrung, Leistung und Sicherheit zu gewährleisten.
Diese Seite bietet Best Practices, die Sie als Referenz nutzen können, während Sie Ihre Anwendung entwickeln und vor dem Livegang, sowie Informationen zu den automatischen Next.js-Optimierungen, die Sie kennen sollten.
Automatische Optimierungen
Diese Next.js-Optimierungen sind standardmäßig aktiviert und erfordern keine Konfiguration:
- Code-Splitting (Code-Aufteilung): Next.js teilt Ihren Anwendungscode automatisch nach Seiten auf. Das bedeutet, dass bei der Navigation nur der Code für die aktuelle Seite geladen wird. Sie können auch Lazy Loading (verzögertes Laden) für Drittanbieter-Bibliotheken in Betracht ziehen, wo dies sinnvoll ist.
- Prefetching (Vorabrufen): Wenn ein Link zu einer neuen Route in den Sichtbereich des Benutzers gelangt, ruft Next.js die Route im Hintergrund vorab. Dies macht die Navigation zu neuen Routen nahezu verzögerungsfrei. Sie können das Prefetching bei Bedarf deaktivieren.
- Automatic Static Optimization (Automatische statische Optimierung): Next.js erkennt automatisch, ob eine Seite statisch ist (vorgerendert werden kann), wenn sie keine blockierenden Datenanforderungen hat. Optimierte Seiten können zwischengespeichert und dem Endbenutzer von mehreren CDN-Standorten aus bereitgestellt werden. Sie können bei Bedarf Server-side Rendering (Serverseitiges Rendering) aktivieren.
Diese Standardeinstellungen zielen darauf ab, die Leistung Ihrer Anwendung zu verbessern und die Kosten sowie die Menge der übertragenen Daten bei jeder Netzwerkanfrage zu reduzieren.
Während der Entwicklung
Während Sie Ihre Anwendung entwickeln, empfehlen wir die Verwendung der folgenden Funktionen, um die beste Leistung und Benutzererfahrung zu gewährleisten:
Routing und Rendering
<Link>-Komponente: Verwenden Sie die<Link>-Komponente für clientseitige Navigation und Prefetching.- Custom Errors (Benutzerdefinierte Fehler): Behandeln Sie 500- und 404-Fehler elegant.
Datenabruf und Caching
- API Routes (API-Routen): Verwenden Sie Route Handlers, um auf Backend-Ressourcen zuzugreifen und zu verhindern, dass sensible Geheimnisse dem Client preisgegeben werden.
- Data Caching (Daten-Zwischenspeicherung): Überprüfen Sie, ob Ihre Datenanfragen zwischengespeichert werden oder nicht, und aktivieren Sie die Zwischenspeicherung bei Bedarf. Stellen Sie sicher, dass Anfragen, die nicht
getStaticPropsverwenden, bei Bedarf zwischengespeichert werden. - Incremental Static Regeneration (Inkrementelle statische Regenerierung): Verwenden Sie Incremental Static Regeneration, um statische Seiten nach dem Build zu aktualisieren, ohne Ihre gesamte Website neu zu erstellen.
- Static Images (Statische Bilder): Verwenden Sie das
public-Verzeichnis, um statische Assets Ihrer Anwendung automatisch zwischenzuspeichern, z.B. Bilder.
UI und Barrierefreiheit
- Font Module (Schriftarten-Modul): Optimieren Sie Schriftarten mit dem Font Module, das Ihre Schriftartendateien automatisch mit anderen statischen Assets hostet, externe Netzwerkanfragen entfernt und Layout Shift (Layoutverschiebung) reduziert.
<Image>-Komponente: Optimieren Sie Bilder mit der Image-Komponente, die Bilder automatisch optimiert, Layoutverschiebungen verhindert und sie in modernen Formaten wie WebP bereitstellt.<Script>-Komponente: Optimieren Sie Drittanbieter-Skripte mit der Script-Komponente, die Skripte automatisch verzögert und verhindert, dass sie den Hauptthread blockieren.- ESLint: Verwenden Sie das integrierte
eslint-plugin-jsx-a11y-Plugin, um Barrierefreiheitsprobleme frühzeitig zu erkennen.
Sicherheit
- Environment Variables (Umgebungsvariablen): Stellen Sie sicher, dass Ihre
.env.*-Dateien in.gitignoreaufgeführt sind und nur öffentliche Variablen mitNEXT_PUBLIC_beginnen. - Content Security Policy (Inhalts-Sicherheitsrichtlinie): Erwägen Sie das Hinzufügen einer Content Security Policy, um Ihre Anwendung vor verschiedenen Sicherheitsbedrohungen wie Cross-Site-Scripting, Clickjacking und anderen Code-Injection-Angriffen zu schützen.
Metadaten und SEO
<Head>-Komponente: Verwenden Sie dienext/head-Komponente, um Seitentitel, Beschreibungen und mehr hinzuzufügen.
Typsicherheit
- TypeScript und TS Plugin (TypeScript-Plugin): Verwenden Sie TypeScript und das TypeScript-Plugin für bessere Typsicherheit und um Fehler frühzeitig zu erkennen.
Vor dem Livegang
Vor dem Livegang können Sie next build ausführen, um Ihre Anwendung lokal zu erstellen und Build-Fehler zu erkennen, und dann next start ausführen, um die Leistung Ihrer Anwendung in einer produktionsähnlichen Umgebung zu messen.
Core Web Vitals
- Lighthouse: Führen Sie Lighthouse im Inkognito-Modus aus, um ein besseres Verständnis dafür zu erhalten, wie Ihre Benutzer Ihre Website erleben werden, und um Verbesserungsmöglichkeiten zu identifizieren. Dies ist ein simulierter Test und sollte mit Felddaten (wie Core Web Vitals) kombiniert werden.
Analyse der Bundles
Verwenden Sie das @next/bundle-analyzer-Plugin, um die Größe Ihrer JavaScript-Bundles zu analysieren und große Module und Abhängigkeiten zu identifizieren, die die Leistung Ihrer Anwendung beeinträchtigen könnten.
Zusätzlich können die folgenden Tools Ihnen helfen, die Auswirkungen des Hinzufügens neuer Abhängigkeiten zu Ihrer Anwendung zu verstehen: