next/image হল <img> ট্যাগের জন্য Next.js এর অপ্টিমাইজড প্রতিস্থাপন। এটি স্বয়ংক্রিয়ভাবে ইমেজ পারফরম্যান্সের সেরা অনুশীলনগুলির একটি স্ট্যাক প্রয়োগ করে যা অন্যথায় আপনাকে হাতে হাত মিলিয়ে বাস্তবায়ন করতে হবে।
tsx
;
() {
(
);
}
next/image হল <img> ট্যাগের জন্য Next.js এর অপ্টিমাইজড প্রতিস্থাপন। এটি স্বয়ংক্রিয়ভাবে ইমেজ পারফরম্যান্সের সেরা অনুশীলনগুলির একটি স্ট্যাক প্রয়োগ করে যা অন্যথায় আপনাকে হাতে হাত মিলিয়ে বাস্তবায়ন করতে হবে।
;
() {
(
);
}
srcset — একাধিক আকার তৈরি করে যাতে প্রতিটি ডিভাইস সঠিকটি ডাউনলোড করে।priority দিয়ে ওভাররাইড করুন)।width/height (বা fill) স্থান সংরক্ষণ করে যাতে ইমেজ লোড হওয়ার সময় পৃষ্ঠা লাফিয়ে না যায়।placeholder="blur" লোডিং এর সময় একটি ছোট ঝাপসা প্রিভিউ দেখায়।<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
fill ব্যবহার করুন (নির্দিষ্ট width/height এর পরিবর্তে) যখন ইমেজটি তার অবস্থান করা প্যারেন্ট পূরণ করা উচিত — হিরো/কভার ইমেজের জন্য সাধারণ।
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
ইমেজগুলি সাধারণত একটি পৃষ্ঠার সবচেয়ে ভারী সম্পদ এবং খারাপ Core Web Vitals (LCP, CLS) এর শীর্ষস্থানীয় কারণ। next/image রিসাইজিং, আধুনিক ফর্ম্যাট, রেসপন্সিভ srcset, lazy loading এবং লেআউট-শিফট প্রতিরোধ স্বয়ংক্রিয় করে — একটি প্রধান পারফরম্যান্স চোরকে একটি একক কম্পোনেন্টে পরিণত করে, LCP ইমেজের জন্য priority সহ যা একমাত্র নল যা আপনাকে মনে রাখতে হবে।