ਤੁਸੀਂ Next.js ਵਿੱਚ static assets ਨੂੰ ਕਿਵੇਂ serve ਕਰਦੇ ਹੋ?

Question

Accepted Answer

Next.js ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਦੀ ਰੂਟ ਵਿੱਚ ਖਾਸ **`public/`** ਫੋਲਡਰ ਤੋਂ static files (ਚਿੱਤਰ, ਫੌਂਟ, ਆਈਕਨ, PDFs, `robots.txt`) serve ਕਰਦਾ ਹੈ। ## public ਫੋਲਡਰ URL ਰੂਟ ਨਾਲ 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 ``` `public/logo.png` ਵਿੱਚ ਇੱਕ ਫਾਈਲ URL `/logo.png` ਉੱਤੇ ਉਪਲਬਧ ਹੈ — `public/` ਵਾਲਾ ਹਿੱਸਾ drop ਹੋ ਜਾਂਦਾ ਹੈ। ਉਹਨਾਂ ਦਾ ਹਵਾਲਾ root ਤੋਂ absolute path ਨਾਲ ਦਿਓ: ```tsx import Image from "next/image"; export default function Header() { return ( <>

Download guide ); } ``` ## public/ vs importing assets ```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 ਫਾਈਲ ਨਾਮ ਹੁੰਦਾ ਹੈ (ਵਧੀਆ long-term caching) ਅਤੇ Next ਉਹਨਾਂ ਦੇ ਆਯਾਮਾਂ ਦਾ ਅਨੁਮਾਨ ਲਗਾ ਸਕਦਾ ਹੈ। `public/` ਨੂੰ stable URL ਨਾਲ ਸੰਦਰਭਿਤ ਫਾਈਲਾਂ (favicon, robots.txt, og-images, downloadables) ਲਈ ਵਰਤੋ ਅਤੇ components ਵਿੱਚ ਸਿੱਧੇ ਤੌਰ ਤੇ ਵਰਤੇ ਜਾਣ ਵਾਲੀਆਂ ਚਿੱਤਰਾਂ ਲਈ **imports** ਦੀ ਵਰਤੋਂ ਕਰੋ। ## Caveats - ਸਿਰਫ **build ਸਮੇਂ** ਮੌਜੂਦ ਫਾਈਲਾਂ ਹੀ serve ਹੁੰਦੀਆਂ ਹਨ — `public/` runtime upload destination ਨਹੀਂ ਹੈ। - ਉੱਥੇ secrets ਨਾ ਰੱਖੋ — `public/` ਵਿੱਚ ਸਭ ਕੁਝ URL ਦੁਆਰਾ publicly accessible ਹੈ। ## ਇਹ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ `public/` ਫੋਲਡਰ Next.js ਵਿੱਚ static files serve ਕਰਨ ਦਾ ਸਧਾਰਨ, convention-ਅਧਾਰਿਤ ਤਰੀਕਾ ਹੈ (favicons, robots.txt, OG images, downloads)। "}}}ਇਹ ਜਾਣਨਾ ਕਿ ਇਸ ਦੀ ਸਮੱਗਰੀ URL ਰੂਟ ਤੋਂ map ਕਰਦੀ ਹੈ — ਅਤੇ ਕਦੋਂ ਇੱਕ asset ਨੂੰ import ਕਰਨਾ ਪਹਿਲਾਂ ਚੁਣਨਾ ਚਾਹੀਦਾ ਹੈ (hashed, cacheable, auto-sized) ਬਨਾਮ ਇਸ ਨੂੰ `public/` ਤੋਂ ਸੰਦਰਭਿਤ ਕਰਨਾ — ਰੋਜ਼ਾਨਾ static-asset ਦੀਆਂ ਲੋੜਾਂ ਨੂੰ ਪੂਰਾ ਕਰਦਾ ਹੈ। {