Statische Assets

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

Der Ordner ist auch nützlich für robots.txt, favicon.ico, Google Site Verification und andere statische Dateien (einschließlich .html). Achten Sie jedoch darauf, keine statische Datei mit demselben Namen wie eine Datei im pages/-Verzeichnis zu haben, da dies zu einem Fehler führt. Mehr erfahren.

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.