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 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 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 Analytics, OpenTelemetry, und Instrumentation.