Next.js Image component in Next.js

import Image from 'next/image'

// Basic usage with local image
import heroImg from '@/public/hero.jpg'

export default function Hero() {
  return (
    <Image
      src={heroImg}
      alt="Hero image"
      // width and height are auto-detected for local images
      priority // Load eagerly (for above-fold images)
    />
  )
}

// Remote images need dimensions
export function RemoteImage() {
  return (
    <Image
      src="https://example.com/photo.jpg"
      alt="Remote photo"
      width={800}
      height={600}
      className="rounded-lg"
    />
  )
}

// Responsive with fill
export function ResponsiveImage() {
  return (
    <div className="relative w-full h-[400px]">
      <Image
        src="/banner.jpg"
        alt="Banner"
        fill
        style={{ objectFit: 'cover' }}
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
      />
    </div>
  )
}

// With blur placeholder
import myImage from '@/public/photo.jpg'

export function BlurImage() {
  return (
    <Image
      src={myImage}
      alt="Photo"
      placeholder="blur" // Auto-generated for local images
      // blurDataURL={customBlurDataURL} // For remote images
    />
  )
}