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 Head-Komponente in Next.js ermöglicht es Ihnen, den <head> einer Seite zu modifizieren. Weitere Informationen finden Sie in der Head-Komponenten-Dokumentation.
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 Analytics, OpenTelemetry, und Instrumentierung.