Statische Assets

Next.js kann statische Dateien wie Bilder aus einem Ordner namens public im Stammverzeichnis bedienen. Dateien in public können dann in Ihrem Code ausgehend von der Basis-URL (/) referenziert werden.

Beispielsweise kann die Datei public/avatars/me.png durch Aufrufen des /avatars/me.png-Pfads angezeigt werden. Der Code zur Anzeige dieses Bildes könnte so aussehen:

import Image from 'next/image'
 
export function Avatar({ id, alt }) {
  return <Image src={`/avatars/${id}.png`} alt={alt} width="64" height="64" />
}
 
export function AvatarOfMe() {
  return <Avatar id="me" alt="Ein Porträt von mir" />
}

Caching

Next.js kann Assets im public-Ordner nicht sicher zwischenspeichern, da sie sich ändern können. Die standardmäßig angewendeten Caching-Header lauten:

Cache-Control: public, max-age=0

Robots, Favicons und andere

Der Ordner ist auch nützlich für robots.txt, favicon.ico, Google Site Verification und andere statische Dateien (einschließlich .html). Stellen Sie jedoch sicher, dass keine statische Datei den gleichen Namen wie eine Datei im pages/-Verzeichnis hat, da dies zu einem Fehler führen wird. Mehr dazu.

Hinweis:

• Das Verzeichnis muss public heißen. Der Name kann nicht geändert werden und es ist das einzige Verzeichnis zur Bereitstellung statischer Assets.
• Nur Assets, die zum Zeitpunkt des Builds im public-Verzeichnis vorhanden sind, werden von Next.js bereitgestellt. Dateien, die zum Zeitpunkt der Anfrage hinzugefügt werden, sind nicht verfügbar. Wir empfehlen die Verwendung eines Drittanbieter-Dienstes wie Vercel Blob für persistenten Dateispeicher.