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:

  • Code-splitting: Next.js führt automatisch Code-Splitting deines Anwendungscodes nach Seiten durch. Das bedeutet, dass bei der Navigation nur der Code der aktuellen Seite geladen wird. Du kannst zusätzlich Lazy Loading für 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.
  • Automatic Static Optimization: Next.js erkennt automatisch, ob eine Seite statisch ist (vorgerendert werden kann), wenn sie keine blockierenden Datenanforderungen hat. Optimierte Seiten können gecacht und von mehreren CDN-Standorten an den Endbenutzer ausgeliefert werden. Du kannst bei Bedarf zu Server-side Rendering wechseln.

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

Datenabruf und Caching

  • API Routes: Verwende Route Handler für den Zugriff auf Backend-Ressourcen und verhindere, dass sensible Geheimnisse dem Client offengelegt werden.
  • Daten-Caching: Überprüfe, ob deine Datenanfragen gecacht werden oder nicht, und aktiviere Caching wo angebracht. Stelle sicher, dass Anfragen, die nicht getStaticProps verwenden, bei Bedarf gecacht werden.
  • Incremental Static Regeneration: Nutze Incremental Static Regeneration, um statische Seiten nach dem Build zu aktualisieren, ohne die gesamte Website neu zu erstellen.
  • Statische Bilder: Nutze das public-Verzeichnis, um statische Assets deiner Anwendung, z.B. Bilder, automatisch zu cachen.

UI und Barrierefreiheit

  • 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

  • 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

  • <Head> Component: Verwende die next/head-Komponente, um Seitentitel, Beschreibungen und mehr hinzuzufügen.

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.