آپ Next.js میں static assets کو کیسے serve کرتے ہیں؟

Question

Accepted Answer

Next.js آپ کے پروجیکٹ کی root میں خصوصی public/ folder سے static files (تصویریں، fonts، icons، PDFs، robots.txt) کو serve کرتا ہے۔

public folder URL root سے map کرتا ہے

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

پر موجود ایک file 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** تصویریں ایک content-hashed filename حاصل کرتی ہیں (بہترین long-term caching) اور Next ان کی dimensions معلوم کر سکتا ہے۔ `public/` استعمال کریں ان files کے لیے جو stable URL سے reference ہوں (favicon، robots.txt، og-images، downloadables) اور components میں براہ راست استعمال کی جانے والی تصویروں کے لیے **imports** استعمال کریں۔ ## محدودیتیں - صرف **build time** پر موجود files serve ہوتی ہیں — `public/` runtime upload destination نہیں ہے۔ - وہاں secrets نہ رکھیں — `public/` میں سب کچھ URL سے publicly accessible ہے۔ ## یہ کیوں اہم ہے `public/` folder Next.js میں static files کو serve کرنے کا سادہ، convention-based طریقہ ہے (favicons، robots.txt، OG images، downloads)۔ یہ جاننا کہ اس کا مواد URL root سے کیسے map کرتا ہے — اور کب ایک asset کو import کرنا پسند کریں (hashed، cacheable، auto-sized) بمقابلہ `public/` سے reference کرنے کے — روزمرہ کی static-asset ضروریات کو cover کرتا ہے۔