Next.js Image Optimization Error

Add all external image hosts to next.config.js.

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "images.example.com",
        port: "",
        pathname: "/**",
      },
    ],
  },
}

Sharp is required for production image optimization on non-Vercel deployments.

# Install sharp
npm install sharp

# Verify installation
npx sharp --version

# Next.js will use sharp automatically when available
# In development, Next.js uses squoosh (built-in)

Always provide width, height, and alt attributes.

import Image from "next/image"
import myPic from "../public/photo.jpg"

// ✅ Imported image (automatic width/height)
<Image src={myPic} alt="Description" />

// ✅ Remote image with explicit dimensions
<Image
  src="https://example.com/photo.jpg"
  alt="Description"
  width={800}
  height={600}
/>

// ✅ Unoptimized for SVGs or dynamic images
<Image
  src={svgImage}
  alt="SVG"
  width={100}
  height={100}
  unoptimized
/>