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

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