Uddeshyo | Student Super App

10. Next.js Image Component

📘 কনসেপ্ট (থিওরি)

Next.js এর ইমেজ কম্পোনেন্ট (next/image) হলো বিল্ট-ইন পারফরম্যান্স অপ্টিমাইজেশনসহ HTML এর  এলিমেন্টের একটি প্রসারিত রূপ।

অপ্টিমাইজেশনগুলোর মধ্যে রয়েছে:
- **সাইজ অপ্টিমাইজেশন (Size Optimization)**: WebP এর মতো আধুনিক ফরম্যাট ব্যবহার করে প্রতিটি ডিভাইসের জন্য স্বয়ংক্রিয়ভাবে সঠিক মাপের ছবি পরিবেশন করে।
- **ভিজ্যুয়াল স্টেবিলিটি (Visual Stability)**: স্বয়ংক্রিয়ভাবে কিউমুলেটিভ লেআউট শিফট (Cumulative Layout Shift - CLS) প্রতিরোধ করে।
- **দ্রুত পেজ লোড (Faster Page Loads)**: ছবিগুলো ডিফল্টভাবে লেজি-লোড (lazy-loaded) হয়।

রিমোট (Remote) ছবির জন্য আপনাকে অবশ্যই width এবং height প্রদান করতে হবে।

💡 উদাহরণ

next/image এর ব্যবহার:

import Image from 'next/image'

export default function Page() {
  return (
    
  )
}

🎯 আপনার কাজ (প্র্যাকটিস)

next/image থেকে Image ইম্পোর্ট করুন। src "/logo.png", alt "Logo", width 100, এবং height 50 দিয়ে একটি ছবি রেন্ডার করুন।

main.nextjs

OUTPUT

Run your code to see the output here...