Next.js serverer statiske filer (billeder, skrifttyper, ikoner, PDF'er, robots.txt) fra den specielle public/-mappe i roden af dit 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å er tilgængelig på URL'en — -delen fjernes. Referér til dem med en absolut sti fra roden:
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
Importerede billeder får et indoldshash-filnavn (fantastisk til langtidscaching) og Next kan udlede deres dimensioner. Brug public/ til filer, der refereres med stabil URL (favicon, robots.txt, og-images, downloads), og imports til billeder, der bruges direkte i komponenter.
public/ er ikke en runtime-uploadbestemmelse.public/ er offentligt tilgængeligt via URL.public/-mappen er den enkle, konventionsbaserede måde at servere statiske filer i Next.js (favicons, robots.txt, OG-billeder, downloads).
At vide, at dens indhold mappes til URL-roden — og hvornår man skal foretrække at importere et asset (hashet, cacheable, auto-dimensioneret) versus at referere til det fra public/ — dækker dagligdagse statiske asset-behov.
Et bibliotek af IT-interviewspørgsmål med detaljerede svar — fra Junior til Senior.
Donér