Produktions-Checkliste

Bevor Sie Ihre Next.js-Anwendung in die Produktion überführen, gibt es einige Optimierungen und Muster, die Sie implementieren sollten, um die beste Benutzererfahrung, Performance und Sicherheit zu gewährleisten.

Diese Seite bietet Best Practices, die Sie als Referenz nutzen können, während Sie Ihre Anwendung entwickeln, vor dem Livegang und nach dem Deployment - sowie die automatischen Next.js-Optimierungen, die Sie kennen sollten.

Automatische Optimierungen

Diese Next.js-Optimierungen sind standardmäßig aktiviert und erfordern keine Konfiguration:

Server-Komponenten: Next.js verwendet standardmäßig Server-Komponenten. Server-Komponenten werden auf dem Server ausgeführt und benötigen kein JavaScript für das Rendering auf dem Client. Daher haben sie keine Auswirkung auf die Größe Ihrer clientseitigen JavaScript-Bundles. Sie können bei Bedarf Client-Komponenten für Interaktivität verwenden.
Code-Splitting: Server-Komponenten ermöglichen automatisches Code-Splitting nach Routensegmenten. Sie können auch Lazy Loading für Client-Komponenten und Drittanbieter-Bibliotheken in Betracht ziehen, wo angebracht.
Prefetching: Wenn ein Link zu einer neuen Route in den Viewport des Benutzers gelangt, prefetcht Next.js die Route im Hintergrund. Dies macht die Navigation zu neuen Routen nahezu instantan. Sie können das Prefetching bei Bedarf deaktivieren.
Statisches Rendering: Next.js rendert Server- und Client-Komponenten beim Build auf dem Server statisch und cached das gerenderte Ergebnis, um die Performance Ihrer Anwendung zu verbessern. Sie können bei Bedarf Dynamisches Rendering für bestimmte Routen aktivieren.
Caching: Next.js cached Datenanfragen, das gerenderte Ergebnis von Server- und Client-Komponenten, statische Assets und mehr, um die Anzahl der Netzwerkanfragen an Ihren Server, Datenbank und Backend-Dienste zu reduzieren. Sie können das Caching bei Bedarf deaktivieren.

Diese Standardeinstellungen zielen darauf ab, die Performance 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 Performance und Benutzererfahrung zu gewährleisten:

Routing und Rendering

Layouts: Verwenden Sie Layouts, um UI über Seiten hinweg zu teilen und partielles Rendering bei der Navigation zu ermöglichen.
<Link>-Komponente: Verwenden Sie die <Link>-Komponente für clientseitige Navigation und Prefetching.
Fehlerbehandlung: Behandeln Sie Catch-all-Fehler und 404-Fehler in der Produktion elegant, indem Sie benutzerdefinierte Fehlerseiten erstellen.
Kompositionsmuster: Befolgen Sie die empfohlenen Kompositionsmuster für Server- und Client-Komponenten und überprüfen Sie die Platzierung Ihrer "use client"-Grenzen, um unnötige Vergrößerung Ihres clientseitigen JavaScript-Bundles zu vermeiden.
Dynamische Funktionen: Beachten Sie, dass dynamische Funktionen wie cookies() und die searchParams-Prop die gesamte Route für Dynamisches Rendering aktivieren (oder Ihre gesamte Anwendung, wenn sie im Root-Layout verwendet werden). Stellen Sie sicher, dass die Verwendung dynamischer Funktionen absichtlich erfolgt, und wrappen Sie sie bei Bedarf in <Suspense>-Grenzen.

Gut zu wissen: Partielles Pre-Rendering (Experimentell) ermöglicht es, Teile einer Route dynamisch zu gestalten, ohne die gesamte Route für dynamisches Rendering zu aktivieren.

Datenabruf und Caching

Server-Komponenten: Nutzen Sie die Vorteile des Datenabrufs auf dem Server mit Server-Komponenten.
Route-Handler: Verwenden Sie Route-Handler, um von Client-Komponenten auf Ihre Backend-Ressourcen zuzugreifen. Rufen Sie jedoch keine Route-Handler von Server-Komponenten auf, um zusätzliche Serveranfragen zu vermeiden.
Streaming: Verwenden Sie Lade-UI und React Suspense, um UI schrittweise vom Server zum Client zu senden und zu verhindern, dass die gesamte Route blockiert, während Daten abgerufen werden.
Paralleler Datenabruf: Reduzieren Sie Netzwerk-Wasserfälle, indem Sie Daten parallel abrufen, wo angebracht. Ziehen Sie auch Preloading von Daten in Betracht, wo angebracht.
Daten-Caching: Überprüfen Sie, ob Ihre Datenanfragen gecached werden oder nicht, und aktivieren Sie das Caching bei Bedarf. Stellen Sie sicher, dass Anfragen, die nicht fetch verwenden, gecached werden.
Statische Bilder: Verwenden Sie das public-Verzeichnis, um die statischen Assets Ihrer Anwendung automatisch zu cachen, z.B. Bilder.

UI und Barrierefreiheit

Formulare und Validierung: Verwenden Sie Server-Aktionen, um Formularübermittlungen, serverseitige Validierung und Fehlerbehandlung zu verwalten.

Font-Modul: Optimieren Sie Schriftarten mit dem Font-Modul, das Ihre Schriftdateien automatisch mit anderen statischen Assets hostet, externe Netzwerkanfragen entfernt und Layout-Shift reduziert.
<Image>-Komponente: Optimieren Sie Bilder mit der Image-Komponente, die Bilder automatisch optimiert, Layout-Shift verhindert und sie in modernen Formaten wie WebP oder AVIF 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 eingebaute eslint-plugin-jsx-a11y-Plugin, um Barrierefreiheitsprobleme frühzeitig zu erkennen.

Sicherheit

Tainting: Verhindern Sie, dass sensible Daten dem Client preisgegeben werden, indem Sie Datenobjekte und/oder bestimmte Werte als "tainted" markieren.
Server-Aktionen: Stellen Sie sicher, dass Benutzer berechtigt sind, Server-Aktionen aufzurufen. Überprüfen Sie die empfohlenen Sicherheitspraktiken.

Umgebungsvariablen: Stellen Sie sicher, dass Ihre .env.*-Dateien in .gitignore aufgenommen sind und nur öffentliche Variablen mit NEXT_PUBLIC_ prefixiert werden.
Content Security Policy: 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: Verwenden Sie die Metadata-API, um die Suchmaschinenoptimierung (SEO) Ihrer Anwendung durch 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 Indexieren Ihrer Seiten, indem Sie Sitemaps und Robots-Dateien generieren.

Typsicherheit

TypeScript und TS-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 bauen und Build-Fehler zu erkennen, und dann next start ausführen, um die Performance 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 bekommen, wie Ihre Benutzer Ihre Website erleben werden, und um Verbesserungsbereiche 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.

Bundle-Analyse

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 Performance Ihrer Anwendung beeinträchtigen könnten.

Zusätzlich können Ihnen folgende Tools helfen, die Auswirkungen des Hinzufügens neuer Abhängigkeiten zu Ihrer Anwendung zu verstehen:

Nach dem Deployment

Abhängig davon, wo Sie Ihre Anwendung deployen, haben Sie möglicherweise Zugriff auf zusätzliche Tools und Integrationen, die Ihnen helfen, die Performance Ihrer Anwendung zu überwachen und zu verbessern.

Für Vercel-Deployments empfehlen wir Folgendes:

Analytics: Ein integriertes Analytics-Dashboard, das Ihnen hilft, den Traffic Ihrer Anwendung zu verstehen, einschließlich der Anzahl einzigartiger Besucher, Seitenaufrufe und mehr.
Speed Insights: Echtzeit-Performance-Einblicke basierend auf Besucherdaten, die eine praktische Ansicht der Performance Ihrer Website im Feld bieten.
Logging: Runtime- und Aktivitätsprotokolle, die Ihnen helfen, Probleme zu debuggen und Ihre Anwendung in der Produktion zu überwachen. Alternativ finden Sie auf der Integrationsseite eine Liste von Drittanbieter-Tools und -Diensten.

Gut zu wissen:

Für ein umfassendes Verständnis der Best Practices für Produktions-Deployments auf Vercel, einschließlich detaillierter Strategien zur Verbesserung der Website-Performance, lesen Sie die Vercel-Produktions-Checkliste.

Die Befolgung dieser Empfehlungen wird Ihnen helfen, eine schnellere, zuverlässigere und sicherere Anwendung für Ihre Benutzer zu bauen.

On this page