Statische Assets in `public`

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

Für statische Metadatendateien wie robots.txt, favicon.ico usw. sollten Sie spezielle Metadatendateien im app-Ordner verwenden.

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.