Next.js serverar statiska filer (bilder, typsnitt, ikoner, PDF:er, robots.txt) från den speciella mappen public/ i roten av ditt projekt.
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
En fil på är tillgänglig på URL:en — delen utelämnas. Referera dem med en absolut sökväg från roten:
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
Importerade bilder får ett innehållshashat filnamn (bra långtidscachning) och Next kan dra slutsatser om deras dimensioner. Använd public/ för filer som refereras med stabil URL (favicon, robots.txt, og-bilder, nedladdningsbar) och importer för bilder som används direkt i komponenter.
public/ är inte en körningsuppladdningsdestination.public/ är offentligt tillgängligt via URL.Mappen public/ är det enkla, konventionsbaserade sättet att servera statiska filer i Next.js (favicons, robots.txt, OG-bilder, nedladdningar).
Att veta att dess innehåll mappas till URL-roten — och när det är bättre att importera en tillgång (hashad, cacherbar, autostorlek) jämfört med att referera den från public/ — täcker vardagliga behov av statiska tillgångar.