আপনি Next.js-এ স্ট্যাটিক অ্যাসেটগুলি কীভাবে পরিবেশন করেন?

Question

Accepted Answer

Next.js আপনার প্রজেক্টের রুটে বিশেষ **`public/`** ফোল্ডার থেকে স্ট্যাটিক ফাইলগুলি (ইমেজ, ফন্ট, আইকন, PDF, `robots.txt`) পরিবেশন করে। ## public ফোল্ডার URL রুটে ম্যাপ করা হয় ```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/` অংশটি বাদ দেওয়া হয়। রুট থেকে একটি পরম পাথ দিয়ে সেগুলিকে উল্লেখ করুন: ```tsx import Image from "next/image"; export default function Header() { return ( <>

Download guide ); } ``` ## public/ বনাম অ্যাসেট আমদানি করা ```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 ``` **আমদানিকৃত** ইমেজগুলি একটি কন্টেন্ট-হ্যাশযুক্ত ফাইলনাম পান (দীর্ঘমেয়াদী ক্যাশিংয়ের জন্য দুর্দান্ত) এবং Next তাদের মাত্রা অনুমান করতে পারে। স্থিতিশীল URL দ্বারা উল্লেখ করা ফাইলগুলির জন্য `public/` ব্যবহার করুন (favicon, robots.txt, og-images, ডাউনলোডযোগ্য) এবং সরাসরি উপাদানগুলিতে ব্যবহৃত ইমেজগুলির জন্য **আমদানি**। ## সতর্কতা - শুধুমাত্র **বিল্ড সময়ে** উপস্থিত ফাইলগুলি পরিবেশন করা হয় — `public/` একটি রানটাইম আপলোড গন্তব্য নয়। - সেখানে গোপনীয়তা রাখবেন না — `public/`-এর সবকিছু URL দ্বারা সর্বজনীনভাবে অ্যাক্সেসযোগ্য। ## এটি কেন গুরুত্বপূর্ণ `public/` ফোল্ডার হল Next.js-এ স্ট্যাটিক ফাইল পরিবেশনের সহজ, কনভেনশন-ভিত্তিক উপায় (favicons, robots.txt, OG images, ডাউনলোড)। জানা যে এর কন্টেন্টগুলি URL রুটে ম্যাপ করা হয় — এবং একটি অ্যাসেট আমদানি করা (হ্যাশযুক্ত, ক্যাশযোগ্য, স্বয়ংক্রিয় আকার) বনাম `public/` থেকে এটিকে উল্লেখ করার জন্য কখন পছন্দ করতে হয় — দৈনন্দিন স্ট্যাটিক-অ্যাসেট প্রয়োজনীয়তা কভার করে।