Next.js मा static assets कसरी serve गर्नुहुन्छ?

Question

Accepted Answer

Next.js ले static files (images, fonts, icons, PDFs, robots.txt) लाई आपनको project को root मा रहेको विशेष public/ फोल्डरबाट serve गर्छ।

public फोल्डर URL root मा म्याप गरिन्छ

text

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 मा उपलब्ध छ — भाग हटाइन्छ। तिनीहरूलाई root बाट absolute path सँग reference गर्नुहोस्:

Download guide ); } ``` ## public/ बनाम assets import गर्नु ```tsx // Option A: from public/ — referenced by URL string

// Option B: imported — bundled, hashed for caching, dimensions inferred import logo from "./logo.png";

// width/height come from the import automatically ``` **Imported** images ले content-hashed filename पाउँछन् (उत्तम दीर्घकालीन caching) र Next उनीहरूको dimensions अनुमान गर्न सक्छ। stable URL (favicon, robots.txt, og-images, downloadables) द्वारा referenced फाइलहरूको लागि `public/` प्रयोग गर्नुहोस् र components मा directly प्रयोग गरिने images को लागि **imports** प्रयोग गर्नुहोस्। ## चेतावनीहरू - केवल **build time** मा उपस्थित फाइलहरू serve गरिन्छन् — `public/` runtime upload गन्तव्य होइन। - त्यहाँ secrets राख्नुहोस् — `public/` मा सबै कुरा publicly accessible है URL द्वारा। ## किन यो महत्त्वपूर्ण छ `public/` फोल्डर Next.js मा static files (favicons, robots.txt, OG images, downloads) serve गर्ने सरल, convention-based तरिका हो। यसको contents URL root मा म्याप गरिन्छ भन्ने कुरा जान्नु — र कहिले कहिले asset import गर्न (hashed, cacheable, auto-sized) पसंद गर्नु बनाम `public/` बाट reference गर्नु — यो दैनिक static-asset आवश्यकताहरू कभर गर्छ।