Optimierungen
Next.js bietet eine Vielzahl integrierter Optimierungen, die darauf abzielen, die Geschwindigkeit Ihrer Anwendung und die Core Web Vitals zu verbessern. Diese Anleitung behandelt die Optimierungen, die Sie nutzen können, um die Benutzererfahrung zu verbessern.
Integrierte Komponenten
Integrierte Komponenten abstrahieren die Komplexität der Implementierung gängiger UI-Optimierungen. Diese Komponenten sind:
- Bilder: Basierend auf dem nativen
<img>-Element. Die Image-Komponente optimiert Bilder für die Leistung durch Lazy Loading und automatische Größenanpassung basierend auf der Gerätegröße. - Link: Basierend auf den nativen
<a>-Tags. Die Link-Komponente lädt Seiten im Hintergrund vor, für schnellere und flüssigere Seitenübergänge. - Skripte: Basierend auf den nativen
<script>-Tags. Die Script-Komponente gibt Ihnen Kontrolle über das Laden und Ausführen von Drittanbieter-Skripten.
Metadaten
Metadaten helfen Suchmaschinen, Ihre Inhalte besser zu verstehen (was zu besserer SEO führen kann), und ermöglichen es Ihnen, die Darstellung Ihrer Inhalte in sozialen Medien anzupassen. Dies hilft Ihnen, eine ansprechendere und konsistentere Benutzererfahrung über verschiedene Plattformen hinweg zu schaffen.
Die Metadata-API in Next.js ermöglicht es Ihnen, das <head>-Element einer Seite zu modifizieren. Sie können Metadaten auf zwei Arten konfigurieren:
- Konfigurationsbasierte Metadaten: Exportieren Sie ein statisches
metadata-Objekt oder eine dynamischegenerateMetadata-Funktion in einerlayout.js- oderpage.js-Datei. - Dateibasierte Metadaten: Fügen Sie statische oder dynamisch generierte spezielle Dateien zu Routensegmenten hinzu.
Zusätzlich können Sie dynamische Open-Graph-Bilder mit JSX und CSS mithilfe des imageResponse-Konstruktors erstellen.
Statische Assets
Der /public-Ordner in Next.js kann verwendet werden, um statische Assets wie Bilder, Schriftarten und andere Dateien bereitzustellen. Dateien innerhalb von /public können auch von CDN-Anbietern zwischengespeichert werden, damit sie effizient ausgeliefert werden.
Analyse und Monitoring
Für große Anwendungen integriert Next.js beliebte Analyse- und Monitoring-Tools, um Ihnen zu helfen, die Leistung Ihrer Anwendung zu verstehen. Erfahren Sie mehr in den Anleitungen zu OpenTelemetry und Instrumentation.