Next.js servíruje statické soubory (obrázky, fonty, ikony, PDF, robots.txt) ze speciální složky public/ v kořenu vašeho projektu.
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
Soubor v je dostupný na URL — část je odstraněna. Odkazujte na ně pomocí absolutní cesty od kořene:
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
Importované obrázky získají název souboru s hashem obsahu (skvělé pro dlouhodobé ukládání do mezipaměti) a Next může odvodit jejich rozměry. Používejte public/ pro soubory odkazované stabilní URL (favicon, robots.txt, og-images, ke stažení) a importy pro obrázky používané přímo v komponentách.
public/ není cíl nahrávání za běhu.public/ je veřejně přístupné přes URL.Složka public/ je jednoduchý, konvenční způsob, jak servírovat statické soubory v Next.js (favicons, robots.txt, OG images, stahování).
Znalost, že její obsah se mapuje na kořen URL — a kdy upřednostňovat import assetu (hasovaný, cacheable, auto-dimenzovaný) versus odkazování z public/ — pokrývá každodenní potřeby statických assetů.