📸 How to Use Images in Next.js

🧠 Steps:

  1. Import Image from next/image
  2. Add image files inside the public folder
  3. Use the correct path in src attribute

🖼️ Local Image

Man Illustration

🌍 Online Image

Make sure to add the image domain in next.config.js under images.domains

Model on Chair

🚀 Why Use next/image?

  • Automatic Optimization: Converts images to WebP.
  • Lazy Loading: Loads only when visible.
  • Responsive: Resizes based on screen size.
  • Prevents Layout Shift: Width/height avoids CLS.
  • Next.js CDN: Faster image caching and delivery.

🧾 Example Code

📁 Image Component Example:

import Image from 'next/image';

export default function Example() {
    return (
        <Image 
            src="/man.png" 
            alt="Example" 
            width={300} 
            height={300} 
            priority 
        />
    );
}

⚙️ next.config.js Domain Setup:

module.exports = {
    images: {
        domains: ['images.pexels.com'],
    },
};