Optimierungen
Next.js bietet eine Vielzahl von integrierten Optimierungen, die die Geschwindigkeit Ihrer Anwendung und die Core Web Vitals verbessern sollen. 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 bessere 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, was eine ansprechendere und konsistentere Benutzererfahrung über verschiedene Plattformen hinweg schafft.
Die Head-Komponente in Next.js ermöglicht es Ihnen, den <head> einer Seite zu modifizieren. Erfahren Sie mehr in der Head-Komponenten-Dokumentation.
Statische Assets
Der /public-Ordner in Next.js kann verwendet werden, um statische Assets wie Bilder, Schriftarten und andere Dateien bereitzustellen. Dateien in /public können auch von CDN-Anbietern zwischengespeichert werden, um eine effiziente Auslieferung zu gewährleisten.
Analyse und Monitoring
Für größere 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 Analytics, OpenTelemetry, und Instrumentation.