Assets

Next.js kann statische Assets wie Bilder aus dem übergeordneten public-Verzeichnis bereitstellen. Dateien in public können ähnlich wie pages vom Stammverzeichnis der Anwendung aus referenziert werden.

Das public-Verzeichnis ist auch nützlich für robots.txt, Google Site Verification und andere statische Assets. Weitere Informationen finden Sie in der Dokumentation zu Static File Serving.

Profilbild herunterladen

Laden Sie zunächst Ihr Profilbild herunter.

• Laden Sie Ihr Profilbild im .jpg-Format herunter (oder verwenden Sie diese Datei).
• Erstellen Sie ein images-Verzeichnis innerhalb des public-Verzeichnisses.
• Speichern Sie das Bild als profile.jpg im public/images-Verzeichnis.
• Die Bildgröße sollte etwa 400px mal 400px betragen.
• Sie können die ungenutzte SVG-Logo-Datei direkt im public-Verzeichnis löschen.

Nicht optimiertes Bild

Mit regulärem HTML würden Sie Ihr Profilbild wie folgt einfügen:

<img src="/images/profile.jpg" alt="Your Name" />

Dies bedeutet jedoch, dass Sie manuell Folgendes handhaben müssen:

• Sicherstellen, dass Ihr Bild auf verschiedenen Bildschirmgrößen responsiv ist
• Optimieren Ihrer Bilder mit einem Drittanbieter-Tool oder einer Bibliothek
• Laden von Bildern nur, wenn sie in den Viewport gelangen

Und mehr. Next.js bietet stattdessen eine Image-Komponente, die dies für Sie übernimmt.

Image-Komponente und Bildoptimierung

next/image ist eine Erweiterung des HTML-<img>-Elements, das für das moderne Web weiterentwickelt wurde.

Next.js unterstützt standardmäßig auch die Bildoptimierung. Dies ermöglicht das Skalieren, Optimieren und Bereitstellen von Bildern in modernen Formaten wie WebP, wenn der Browser dies unterstützt. Dadurch wird vermieden, dass große Bilder an Geräte mit kleinerem Viewport gesendet werden. Es ermöglicht Next.js auch, zukünftige Bildformate automatisch zu übernehmen und sie an Browser zu liefern, die diese Formate unterstützen.

Die automatische Bildoptimierung funktioniert mit jeder Bildquelle. Selbst wenn das Bild von einer externen Datenquelle wie einem CMS gehostet wird, kann es dennoch optimiert werden.

Verwendung der Image-Komponente

Anstatt Bilder zur Build-Zeit zu optimieren, optimiert Next.js Bilder bei Bedarf, wenn Benutzer sie anfordern. Im Gegensatz zu statischen Site-Generatoren und rein statischen Lösungen erhöhen sich Ihre Build-Zeiten nicht, unabhängig davon, ob Sie 10 oder 10 Millionen Bilder bereitstellen.

Bilder werden standardmäßig lazy geladen. Das bedeutet, dass Ihre Seitenleistung nicht durch Bilder außerhalb des Viewports beeinträchtigt wird. Bilder werden geladen, wenn sie in den Viewport gescrollt werden.

Bilder werden immer so gerendert, dass Cumulative Layout Shift vermieden wird, ein Core Web Vital, das Google für das Ranking in Suchergebnissen verwenden wird.

Hier ist ein Beispiel für die Verwendung von next/image zur Anzeige unseres Profilbilds. Die height- und width-Props sollten die gewünschte Render-Größe mit dem gleichen Seitenverhältnis wie das Quellbild haben.

Hinweis: Wir werden diese Komponente später in "Polishing Layout" verwenden, Sie müssen sie noch nicht kopieren.

import Image from 'next/image';
 
const YourComponent = () => (
  <Image
    src="/images/profile.jpg" // Pfad der Bilddatei
    height={144} // Gewünschte Größe mit korrektem Seitenverhältnis
    width={144} // Gewünschte Größe mit korrektem Seitenverhältnis
    alt="Your Name"
  />
);

Weitere Informationen zur automatischen Bildoptimierung finden Sie in der Dokumentation.

Weitere Informationen zur Image-Komponente finden Sie in der API-Referenz für next/image.