Optimierungen
Next.js verfügt über verschiedene integrierte Optimierungen, die entwickelt wurden, um 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 häufiger UI-Optimierungen. Diese Komponenten sind:
- Bilder: Basierend auf dem nativen
<img>-Element. Die Bild-Komponente optimiert Bilder für die Leistung durch Lazy Loading und automatische Größenanpassung basierend auf Gerätegröße. - Link: Basierend auf nativen
<a>-Tags. Die Link-Komponente präfetcht Seiten im Hintergrund für schnellere und reibungslosere Seitenübergänge. - Skripte: Basierend auf nativen
<script>-Tags. Die Skript-Komponente gibt Ihnen Kontrolle über das Laden und die Ausführung von Skripten von Drittanbietern.
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, um eine ansprechendere und einheitlichere Benutzererfahrung über verschiedene Plattformen hinweg zu schaffen.
Die Metadaten-API in Next.js ermöglicht es Ihnen, das <head>-Element einer Seite zu modifizieren. Sie können Metadaten auf zwei Arten konfigurieren:
- Konfigurations-basierte Metadaten: Exportieren Sie ein statisches
metadata-Objekt oder eine dynamischegenerateMetadata-Funktion in einerlayout.js- oderpage.js-Datei. - Datei-basierte 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 von Next.js kann verwendet werden, um statische Assets wie Bilder, Schriftarten und andere Dateien zu bedienen. Dateien im /public-Ordner können auch von CDN-Anbietern zwischengespeichert werden, um sie effizient zu übermitteln.
Analytics und Monitoring
Für große Anwendungen integriert Next.js beliebte Analytics- und Monitoring-Tools, um Ihnen zu helfen, die Leistung Ihrer Anwendung zu verstehen. Weitere Informationen finden Sie in den Anleitungen zu OpenTelemetry und Instrumentierung.