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:
- Server Components (Server-Komponenten): Next.js verwendet standardmäßig Server Components. Server Components werden auf dem Server ausgeführt und benötigen kein JavaScript für das Rendering auf dem Client. Daher haben sie keine Auswirkungen auf die Größe Ihrer clientseitigen JavaScript-Bundles. Sie können bei Bedarf Client Components (Client-Komponenten) für Interaktivität verwenden.
- Code-Splitting (Code-Aufteilung): Server Components ermöglichen eine automatische Code-Aufteilung nach Routensegmenten. Sie können auch Lazy Loading (verzögertes Laden) für Client Components und 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.
- Static Rendering (Statisches Rendering): Next.js rendert Server- und Client-Komponenten beim Build statisch auf dem Server und speichert das gerenderte Ergebnis zwischen, um die Leistung Ihrer Anwendung zu verbessern. Sie können bei Bedarf Dynamic Rendering (Dynamisches Rendering) für bestimmte Routen aktivieren.
- Caching (Zwischenspeicherung): Next.js speichert Datenanfragen, das gerenderte Ergebnis von Server- und Client-Komponenten, statische Assets und mehr zwischen, um die Anzahl der Netzwerkanfragen an Ihren Server, Ihre Datenbank und Backend-Dienste zu reduzieren. Sie können die Zwischenspeicherung bei Bedarf deaktivieren.
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
- Layouts: Verwenden Sie Layouts, um UI über Seiten hinweg zu teilen und Partial Rendering (Teilrendering) bei der Navigation zu ermöglichen.
<Link>-Komponente: Verwenden Sie die<Link>-Komponente für Client-seitige Navigation und Prefetching.- Error Handling (Fehlerbehandlung): Behandeln Sie Catch-All-Fehler und 404-Fehler in der Produktion elegant, indem Sie benutzerdefinierte Fehlerseiten erstellen.
- Client und Server Components (Client- und Server-Komponenten): Befolgen Sie die empfohlenen Kompositionsmuster für Server- und Client-Komponenten und überprüfen Sie die Platzierung Ihrer
"use client"-Grenzen, um eine unnötige Vergrößerung Ihres clientseitigen JavaScript-Bundles zu vermeiden. - Dynamic APIs (Dynamische APIs): Beachten Sie, dass dynamische APIs wie
cookiesund diesearchParams-Prop die gesamte Route für Dynamic Rendering (Dynamisches Rendering) aktivieren (oder Ihre gesamte Anwendung, wenn sie im Root Layout (Stamm-Layout) verwendet werden). Stellen Sie sicher, dass die Verwendung dynamischer APIs absichtlich erfolgt, und umschließen Sie sie bei Bedarf mit<Suspense>-Grenzen.
Gut zu wissen: Partial Prerendering (Teilweises Vorrendern, experimentell) ermöglicht es, Teile einer Route dynamisch zu gestalten, ohne die gesamte Route für dynamisches Rendering zu aktivieren.
Datenabruf und Caching
- Server Components (Server-Komponenten): Nutzen Sie die Vorteile des Datenabrufs auf dem Server mit Server Components.
- Route Handlers (Routen-Handler): Verwenden Sie Route Handlers, um von Client Components auf Ihre Backend-Ressourcen zuzugreifen. Rufen Sie jedoch keine Route Handlers von Server Components auf, um zusätzliche Serveranfragen zu vermeiden.
- Streaming: Verwenden Sie Loading UI und React Suspense, um UI schrittweise vom Server an den Client zu senden und zu verhindern, dass die gesamte Route blockiert wird, während Daten abgerufen werden.
- Parallel Data Fetching (Paralleler Datenabruf): Reduzieren Sie Netzwerk-Wasserfälle durch parallelen Datenabruf, wo dies sinnvoll ist. Ziehen Sie auch Preloading (Vorabladen) von Daten in Betracht, wo dies sinnvoll ist.
- 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
fetchverwenden, zwischengespeichert werden. - Static Images (Statische Bilder): Verwenden Sie das
public-Verzeichnis, um statische Assets Ihrer Anwendung automatisch zwischenzuspeichern, z.B. Bilder.
UI und Barrierefreiheit
- Forms and Validation (Formulare und Validierung): Verwenden Sie Server Actions, um Formularübermittlungen, serverseitige Validierung und Fehlerbehandlung zu verwalten.
- 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
- Tainting (Markierung): Verhindern Sie, dass sensible Daten dem Client preisgegeben werden, indem Sie Datenobjekte und/oder bestimmte Werte markieren.
- Server Actions (Server-Aktionen): Stellen Sie sicher, dass Benutzer berechtigt sind, Server Actions aufzurufen. Lesen Sie die empfohlenen Sicherheitspraktiken.
- 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
- Metadata API (Metadaten-API): Verwenden Sie die Metadata API, um die Suchmaschinenoptimierung (SEO) Ihrer Anwendung durch das Hinzufügen von Seitentiteln, Beschreibungen und mehr zu verbessern.
- Open Graph (OG)-Bilder: Erstellen Sie OG-Bilder, um Ihre Anwendung für das Teilen in sozialen Medien vorzubereiten.
- Sitemaps und Robots: Helfen Sie Suchmaschinen beim Crawlen und Indizieren Ihrer Seiten, indem Sie Sitemaps und Robots-Dateien generieren.
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.
useReportWebVitals-Hook: Verwenden Sie diesen Hook, um Core Web Vitals-Daten an Analyse-Tools zu senden.
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: