Next.js melayani berkas statis (gambar, font, ikon, PDF, robots.txt) dari folder khusus public/ di akar proyek Anda.
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
Berkas di tersedia di URL — bagian dihilangkan. Referensikan mereka dengan jalur absolut dari akar:
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
Gambar yang diimpor mendapatkan nama berkas hash konten (bagus untuk cache jangka panjang) dan Next dapat menyimpulkan dimensi mereka. Gunakan public/ untuk berkas yang dirujuk oleh URL stabil (favicon, robots.txt, og-images, file yang dapat diunduh) dan impor untuk gambar yang digunakan langsung di komponen.
public/ bukan tujuan unggah runtime.public/ dapat diakses secara publik melalui URL.Folder public/ adalah cara sederhana, berbasis konvensi untuk melayani berkas statis di Next.js (favicon, robots.txt, gambar OG, unduhan).
Mengetahui bahwa kontennya dipetakan ke akar URL — dan kapan lebih baik mengimpor aset (hash, dapat di-cache, ukuran otomatis) versus merujuknya dari public/ — mencakup kebutuhan aset statis sehari-hari.