Next.js मध्ये स्टॅटिक असेट्स कसे सर्व्ह करायचे?

Next.js स्टॅटिक फाइली (प्रतिमा, फॉन्ट, आयकन, PDF, robots.txt) आपल्या प्रकल्पच्या रूटवर असलेल्या विशेष public/ फोल्डरमधून सर्व्ह करते.

हे का महत्वाचे आहे

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

public/logo.png वर असलेली फाइल URL /logo.png वर उपलब्ध आहे — public/ भाग वगळला जातो. त्यांना रूटमधून परिपूर्ण पथानुसार संदर्भित करा:

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>
    </>
  );
}

public/ बनाम असेट्स आयात करणे

// 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

आयात केलेल्या प्रतिमा सामग्री-हॅश फाइल नाव मिळवतात (दीर्घकालीन कॅशिंगसाठी उत्तम) आणि Next त्यांचे परिमाण निर्धारित करू शकते. स्थिर URL (favicon, robots.txt, og-images, डाउनलोडयोग्य) द्वारे संदर्भित फाइलींसाठी public/ वापरा आणि घटकांमध्ये थेट वापरल्या जाणाऱ्या प्रतिमांसाठी आयात करा.

सतर्कता

• केवळ बिल्ड समयवर उपस्थित असलेल्या फाइली सर्व्ह केल्या जातात — public/ रनटाइम अपलोड गंतव्य नाही.
• तेथे गुप्त ठेवू नका — public/ मधील सर्वकाही URL द्वारे सार्वजनिकरित्या प्रवेशयोग्य आहे.

हे का महत्वाचे आहे

public/ फोल्डर Next.js मध्ये स्टॅटिक फाइली सर्व्ह करण्याचा सोपा, संमेलन-आधारित मार्ग आहे (favicon, robots.txt, OG प्रतिमा, डाउनलोड).

जाणून घेणे की त्याचा सामग्री URL रूटवर नक्शा करतो — आणि असेट आयात करणे (हॅश केलेल, कॅशयोग्य, स्व-आकार) public/ वरून संदर्भित करण्यापेक्षा कधी बेहतर आहे — दैनंदिन स्टॅटिक असेट गरजा समाविष्ट करतो.