Next.js आपके प्रोजेक्ट के रूट पर विशेष public/ फोल्डर से स्टेटिक फाइलें (छवियां, फॉन्ट्स, आइकन, PDFs, robots.txt) सेवा देता है।
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
पर एक फाइल URL पर उपलब्ध है — भाग हटा दिया जाता है। उन्हें रूट से पूर्ण पथ के साथ संदर्भित करें:
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
आयातित छवियां content-hashed फाइलनाम प्राप्त करती हैं (बहुत अच्छी दीर्घकालीन कैशिंग) और Next उनके आयाम का अनुमान लगा सकता है। public/ का उपयोग स्थिर URL (favicon, robots.txt, og-images, डाउनलोडेबल) द्वारा संदर्भित फाइलों के लिए करें और आयातों का उपयोग सीधे घटकों में उपयोग की जाने वाली छवियों के लिए करें।
public/ रनटाइम अपलोड गंतव्य नहीं है।public/ में सब कुछ URL द्वारा सार्वजनिक रूप से सुलभ है।public/ फोल्डर Next.js में स्टेटिक फाइलें सेवा देने का सरल, सम्मेलन-आधारित तरीका है (favicons, robots.txt, OG images, डाउनलोड)।
जानना कि इसकी सामग्री URL रूट से कैसे मैप होती है — और कब किसी एसेट को आयात करना (hashed, cacheable, auto-sized) पसंद करना है बनाम इसे public/ से संदर्भित करना — रोज़मर्रा की स्टेटिक-एसेट आवश्यकताओं को कवर करता है।