Next.js, statik dosyaları (görseller, yazı tipleri, simgeler, PDF'ler, robots.txt) projenizin kökündeki özel public/ klasöründen sunar.
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
dosyası URL'sinde kullanılabilir — bölümü bırakılır. Bunları kökten mutlak bir yol ile referans alın:
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
İçe aktarılan görseller içerik karma kodlu bir dosya adı alır (harika uzun vadeli önbellekleme) ve Next bunların boyutlarını çıkarabilir. Sabit URL (favicon, robots.txt, og-images, indirilenler) ile referans alınan dosyalar için public/ kullanın ve doğrudan bileşenlerde kullanılan görseller için içe aktarımları kullanın.
public/ çalışma zamanı yükleme hedefi değildir.public/ içindeki her şey URL aracılığıyla herkese açıktır.public/ klasörü, Next.js'de statik dosyaları sunmanın (favicons, robots.txt, OG-images, indirmeler) basit, kural tabanlı yoludur.
İçeriğinin URL köküne eşlendiğini — ve bir varlığı (karma kodlu, önbelleğe alınabilir, otomatik boyutlandırılmış) public/ dan referans almaya kıyasla ne zaman içe aktarmayı tercih etmek gerektiğini — bilmek, günlük statik varlık ihtiyaçlarını karşılar.