Menu

Produktions-Checkliste

Bevor du deine Next.js-Anwendung in Produktion nimmst, gibt es einige Optimierungen und Muster, die du für die beste Benutzererfahrung, Leistung und Sicherheit implementieren solltest.

Diese Seite bietet Best Practices, die du als Referenz nutzen kannst - während der Entwicklung, vor der Produktivschaltung und nach dem Deployment - sowie die automatischen Next.js-Optimierungen, die du kennen solltest.

Automatische Optimierungen

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

  • Server Components: Next.js verwendet standardmäßig Server Components. Diese laufen auf dem Server und benötigen kein JavaScript für das Rendering auf dem Client. Dadurch haben sie keine Auswirkung auf die Größe deiner Client-seitigen JavaScript-Bundles. Du kannst dann Client Components nach Bedarf für Interaktivität einsetzen.
  • Code-splitting: Server Components ermöglichen automatisches Code-Splitting nach Routensegmenten. Zusätzlich kannst du Lazy Loading für Client Components und Drittanbieter-Bibliotheken in Betracht ziehen.
  • Prefetching: Wenn ein Link zu einer neuen Route in den Viewport des Benutzers kommt, lädt Next.js die Route im Hintergrund vor. Dies macht die Navigation zu neuen Routen nahezu instantan. Du kannst Prefetching bei Bedarf deaktivieren.
  • Static Rendering: Next.js rendert Server und Client Components zur Build-Zeit statisch auf dem Server und speichert das Ergebnis im Cache, um die Leistung deiner Anwendung zu verbessern. Du kannst für bestimmte Routen bei Bedarf zu Dynamic Rendering wechseln.
  • Caching: Next.js speichert Datenanfragen, die gerenderten Ergebnisse von Server und Client Components, statische Assets und mehr im Cache, um die Anzahl der Netzwerkanfragen an deinen Server, die Datenbank und Backend-Services zu reduzieren. Du kannst das Caching bei Bedarf deaktivieren.

Diese Standardeinstellungen zielen darauf ab, die Leistung deiner Anwendung zu verbessern und die Kosten sowie die Menge der übertragenen Daten bei jeder Netzwerkanfrage zu reduzieren.

Während der Entwicklung

Während der Entwicklung deiner Anwendung empfehlen wir die Verwendung der folgenden Funktionen für die beste Leistung und Benutzererfahrung:

Routing und Rendering

Hinweis: Partial Prerendering (experimentell) wird es ermöglichen, Teile einer Route dynamisch zu gestalten, ohne die gesamte Route in dynamisches Rendering zu überführen.

Datenabruf und Caching

  • Server Components: Nutze die Vorteile des serverseitigen Datenabrufs mit Server Components.
  • Route Handlers: Verwende Route Handler für den Zugriff auf Backend-Ressourcen aus Client Components. Rufe Route Handler jedoch nicht von Server Components auf, um eine zusätzliche Serveranfrage zu vermeiden.
  • Streaming: Nutze Loading UI und React Suspense, um UI progressiv vom Server zum Client zu senden und zu verhindern, dass die gesamte Route während des Datenabrufs blockiert wird.
  • Paralleler Datenabruf: Reduziere Netzwerk-Wasserfälle durch parallelen Datenabruf, wo angebracht. Erwäge auch das Vorladen von Daten.
  • Daten-Caching: Überprüfe, ob deine Datenanfragen gecacht werden oder nicht, und aktiviere Caching wo angebracht. Stelle sicher, dass Anfragen, die nicht fetch verwenden, gecacht werden.
  • Statische Bilder: Nutze das public-Verzeichnis, um statische Assets deiner Anwendung, z.B. Bilder, automatisch zu cachen.

UI und Barrierefreiheit

  • Formulare und Validierung: Verwende Server Actions zur Handhabung von Formularübermittlungen, serverseitiger Validierung und Fehlerbehandlung.
  • Font Module: Optimiere Schriften durch Verwendung des Font Modules, das automatisch deine Schriftdateien mit anderen statischen Assets hostet, externe Netzwerkanfragen vermeidet und Layout-Verschiebungen reduziert.
  • <Image> Component: Optimiere Bilder durch Verwendung der Image Component, die automatisch Bilder optimiert, Layout-Verschiebungen verhindert und sie in modernen Formaten wie WebP oder AVIF bereitstellt.
  • <Script> Component: Optimiere Drittanbieter-Skripte durch Verwendung der Script Component, die automatisch Skripte verzögert und verhindert, dass sie den Haupt-Thread blockieren.
  • ESLint: Nutze das eingebaute eslint-plugin-jsx-a11y-Plugin, um Barrierefreiheitsprobleme frühzeitig zu erkennen.

Sicherheit

  • Tainting: Verhindere, dass sensible Daten dem Client offengelegt werden, indem du Datenobjekte und/oder spezifische Werte als "tainted" markierst.
  • Server Actions: Stelle sicher, dass Benutzer autorisiert sind, Server Actions aufzurufen. Überprüfe die empfohlenen Sicherheitspraktiken.
  • Umgebungsvariablen: Stelle sicher, dass deine .env.*-Dateien zu .gitignore hinzugefügt sind und nur öffentliche Variablen mit NEXT_PUBLIC_ beginnen.
  • Content Security Policy: Erwäge das Hinzufügen einer Content Security Policy zum Schutz deiner Anwendung vor verschiedenen Sicherheitsbedrohungen wie Cross-Site-Scripting, Clickjacking und anderen Code-Injection-Angriffen.

Metadaten und SEO

  • Metadata API: Nutze die Metadata API, um die Suchmaschinenoptimierung (SEO) deiner Anwendung durch Hinzufügen von Seitentiteln, Beschreibungen und mehr zu verbessern.
  • Open Graph (OG) Bilder: Erstelle OG-Bilder, um deine Anwendung für Social Sharing vorzubereiten.
  • Sitemaps und Robots: Hilf Suchmaschinen beim Crawlen und Indexieren deiner Seiten durch Generierung von Sitemaps und Robots-Dateien.

Typsicherheit

  • TypeScript und TS Plugin: Verwende TypeScript und das TypeScript-Plugin für bessere Typsicherheit und um Fehler frühzeitig zu erkennen.

Vor der Produktivschaltung

Bevor du in Produktion gehst, kannst du next build ausführen, um deine Anwendung lokal zu bauen und Build-Fehler zu erkennen. Anschließend kannst du mit next start die Leistung deiner Anwendung in einer produktionsähnlichen Umgebung messen.

Core Web Vitals

  • Lighthouse: Führe Lighthouse im Inkognito-Modus aus, um besser zu verstehen, wie Benutzer deine Website erleben werden, und um Verbesserungsmöglichkeiten zu identifizieren. Dies ist ein simulierter Test und sollte mit der Betrachtung von Felddaten (wie Core Web Vitals) kombiniert werden.

Bundle-Analyse

Verwende das @next/bundle-analyzer Plugin, um die Größe deiner JavaScript-Bundles zu analysieren und große Module und Abhängigkeiten zu identifizieren, die die Leistung deiner Anwendung beeinträchtigen könnten.

Zusätzlich können die folgenden Tools dir helfen, die Auswirkungen neuer Abhängigkeiten auf deine Anwendung zu verstehen:

Nach dem Deployment

Abhängig davon, wo du deine Anwendung deployst, hast du möglicherweise Zugriff auf zusätzliche Tools und Integrationen, die dir helfen, die Leistung deiner Anwendung zu überwachen und zu verbessern.

Für Vercel-Deployments empfehlen wir Folgendes:

  • Analytics: Ein integriertes Analytics-Dashboard, das dir hilft, den Traffic deiner Anwendung zu verstehen, einschließlich der Anzahl einzelner Besucher, Seitenaufrufe und mehr.
  • Speed Insights: Leistungseinblicke aus der realen Welt basierend auf Besucherdaten, die einen praktischen Überblick darüber bieten, wie deine Website im Feld performt.
  • Logging: Runtime- und Aktivitätsprotokolle, die dir beim Debuggen von Problemen und der Überwachung deiner Anwendung in Produktion helfen. Alternativ findest du auf der Integrationsseite eine Liste von Drittanbieter-Tools und -Diensten.

Hinweis:

Um ein umfassendes Verständnis der Best Practices für Produktions-Deployments auf Vercel zu erhalten, einschließlich detaillierter Strategien zur Verbesserung der Website-Performance, siehe die Vercel Production Checklist.

Die Befolgung dieser Empfehlungen wird dir helfen, eine schnellere, zuverlässigere und sicherere Anwendung für deine Benutzer zu erstellen.