Next.js serviert statische Dateien (Bilder, Schriftarten, Icons, PDFs, robots.txt) aus dem speziellen public/-Ordner im Stamm deines Projekts.
public/
logo.png → served at /logo.png
favicon.ico → served at /favicon.ico
docs/guide.pdf → served at /docs/guide.pdf
robots.txt → served at /robots.txt
Eine Datei unter ist unter der URL verfügbar — der -Teil wird weggelassen. Verweise darauf mit einem absoluten Pfad vom Stamm:
public/logo.png/logo.pngpublic/import Image from "next/image";
export default function Header() {
return (
<>
<Image src="/logo.png" alt="Logo" width={120} height={40} />
<img src="/icons/star.svg" alt="" />
<a href="/docs/guide.pdf">Download guide</a>
</>
);
}
// Option A: from public/ — referenced by URL string
<Image src="/logo.png" width={120} height={40} alt="" />
// Option B: imported — bundled, hashed for caching, dimensions inferred
import logo from "./logo.png";
<Image src={logo} alt="" /> // width/height come from the import automatically
Importierte Bilder erhalten einen inhaltshashbasierten Dateinamen (hervorragend für langfristiges Caching) und Next kann ihre Dimensionen ableiten. Verwende public/ für Dateien, auf die eine stabile URL verweist (favicon, robots.txt, og-images, Downloads), und Importe für Bilder, die direkt in Komponenten verwendet werden.
public/ ist kein Ziel für Uploads zur Laufzeit.public/ ist öffentlich über URL zugänglich.Der public/-Ordner ist die einfache, konventionsbasierte Art, statische Dateien in Next.js zu servieren (favicons, robots.txt, OG-Images, Downloads).
Zu wissen, dass sein Inhalt zur URL-Root gemappt wird — und wann man das Importieren eines Assets (gehashed, cachebar, auto-dimensioniert) gegenüber dem Referenzieren aus public/ bevorzugen sollte — deckt alltägliche Anforderungen für statische Assets ab.