๐Ÿ“ธ 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'],
    },
};