Next.js palvelee staattisia tiedostoja (kuvia, fontteja, ikoneja, PDF-tiedostoja, robots.txt) erityisestä public/-kansiosta projektin juuressa.
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
Tiedosto osoitteessa on saatavilla URL:ssa — -osa pudotetaan. Viittaa niihin absoluuttisella polulla juuresta:
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
Tuodut kuvat saavat sisällön hajautusarvoon perustuvan tiedostonimen (erinomainen pitkäaikaiseen välimuistiin) ja Next voi päätellä niiden mitat. Käytä public/-kansiota vakaan URL-osoitteen avulla viitattaville tiedostoille (favicon, robots.txt, og-images, ladattavat tiedostot) ja tuonteja komponenteissa suoraan käytetyille kuville.
public/ ei ole suoritusaikaisen lataamisen kohde.public/-kansiossa on julkisesti saatavilla URL-osoitteen kautta.public/-kansio on yksinkertainen, sopimukseen perustuva tapa palvella staattisia tiedostoja Next.js:ssä (favicons, robots.txt, OG-kuvat, lataukset).
Tieto siitä, että sen sisältö kartoittuu URL-juureen — ja milloin preferoidaan assets-tiedoston tuomista (hajautettu, välimuistiin tallennettu, automaattisen kokoinen) verrattuna sen viittaamiseen public/-kansiosta — kattaa jokapäiväiset statiisten assets-tarpeet.