Next.js Image Component

08 Sep, 2025

Next.js Image Component

Next.js Image Component

ওরে বাবা! ওয়েবসাইট বানাইতে গেলে একটা জিনিস সবাইকেই মাথায় রাখতে হয় — ছবি। কারণ ছবি ছাড়া ওয়েবসাইট মানে আলুভর্তা ছাড়া ভাত! খাওয়া যায়, কিন্তু জমে না।

কিন্তু সমস্যার নাম কী জানেন?

👉 ওয়েবসাইটে ছবি থাকলেই লোডিং টাইম বেড়ে যায়।

👉 ইউজাররা বিরক্ত হয়ে পালাইতে শুরু করে।

👉 গুগল বলে, "ওরে! তোর সাইট স্লো, আমি তোকে র‍্যাঙ্কিং এ নামায় দিমু।"

এখন কী করবেন? 🤔

চিন্তা নাই ভাই/আপা — Next.js এর Image Component একদম হিরো হয়ে হাজির!

কেন Image Component ব্যবহার করবো?

🔹 অপ্টিমাইজড ইমেজ লোডিং – ছবি অটো রিসাইজ হয়, কম সাইজে লোড হয়।

🔹 লেজি লোডিং – যেটা দরকার, সেটা তখনই লোড হবে যখন চোখের সামনে আসবে।

🔹 বিভিন্ন ডিভাইস অনুযায়ী ছবি এডজাস্ট – মোবাইল, ট্যাব, ডেস্কটপ — সবার জন্য আলাদা সাইজ।

🔹 ডিফল্টলি Responsive – আলাদা করে CSS লিখতে হবে না।

মানে এক কথায় — পারফরম্যান্সের সেরা মাস্টার! 🚀

কিভাবে ব্যবহার করবো?

ধরেন, আপনার লোগো আছে। সাধারণত আপনি দিতেন:

<img src="/logo.png" alt="Logo" />

কিন্তু Next.js এ দেবেন:

import Image from "next/image";

<Image
src="/logo.png"
alt="Logo"
width={200}
height={100}
/>

কিছু টিপস & ট্রিকস

  1. fill প্রপস ব্যবহার করলে – ইমেজ কনটেইনার অনুযায়ী অ্যাডজাস্ট হয়ে যাবে।
<div className="relative w-64 h-40">
<Image src="/banner.jpg" alt="Banner" fill />
</div>
  1. priority প্রপস ব্যবহার করলে – ইমেজ আগে লোড হবে (যেমন হিরো সেকশনের ছবি)।
<Image src="/hero.jpg" alt="Hero" width={1200} height={500} priority />
  1. এক্সটার্নাল ইমেজ লোড করতে চাইলে – next.config.js এ ডোমেইন অ্যাড করতে হবে।
images: {
domains: ['example.com'],
}
  1. তারপর ব্যবহার:
<Image src="https://example.com/photo.jpg" alt="Photo" width={500} height={500} />

কেন সাধারণ <img> না?

ভাবেন তো, <img> মানে খালি সাইকেল 🚲, আর next/image মানে রেসিং বাইক 🏍️।

দুইটাই কাজ করে, কিন্তু স্পিডে কে এগিয়ে যাবে সেটা বোঝাই যায়!

শেষ কথা 🎯

Next.js এর Image Component মানে হলো –

👉 ফাস্ট লোডিং

👉 গুগল ফ্রেন্ডলি

👉 মোবাইল ফ্রেন্ডলি

👉 আর ডেভেলপারের জন্য পিসফুল কোডিং

তাই আর দেরি না করে — ওয়েবসাইটে next/image ব্যবহার করেন, সাইট হবে একদম ঝকঝকে সুন্দর! ✨