Statische Assets im `public`-Verzeichnis

Next.js kann statische Dateien wie Bilder aus einem Ordner namens public im Stammverzeichnis bereitstellen. Dateien innerhalb von 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 Pfads /avatars/me.png 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 cachen, da sie sich ändern könnten. Die standardmäßig angewendeten Cache-Header lauten:

Cache-Control: public, max-age=0

Robots, Favicons und andere

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

Gut zu wissen:

• Das Verzeichnis muss public heißen. Der Name kann nicht geändert werden und es ist das einzige Verzeichnis, das für statische Assets verwendet wird.
• Nur Assets, die sich zum Zeitpunkt des Builds im public-Verzeichnis befinden, werden von Next.js bereitgestellt. Zur Laufzeit hinzugefügte Dateien sind nicht verfügbar. Für persistente Dateispeicherung empfehlen wir einen Drittanbieterdienst wie Vercel Blob.