public-Ordner

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

Beispielsweise kann die Datei public/avatars/me.png über den Pfad /avatars/me.png aufgerufen werden. Der Code zur Anzeige dieses Bildes könnte wie folgt 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="A portrait of me" />
}

Caching

Next.js kann Assets im public-Ordner nicht sicher zwischenspeichern, da sie sich ändern können. 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.