Next.js Error next-image-unconfigured-host: next/image hostname not configured

Identify: does your log match?

Error: Invalid src prop (https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=1200) on `next/image`, hostname "images.unsplash.com" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

1. High

   Remote host not allowlisted

   Any absolute src URL must match an entry in images.remotePatterns, to stop the optimizer being used as an open proxy.

2. Medium

   Pattern too narrow

   hostname matches exactly; cdn.example.com does not match example.com, and pathname /img/** does not match /images/.

3. Low

   Config change without restart

   next.config.js is read at startup, so edits need the dev server restarted.

Fix

// next.config.ts
const nextConfig = {};
export default nextConfig;

// next.config.ts
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'images.unsplash.com', pathname: '/**' },
      { protocol: 'https', hostname: '**.cloudfront.net' },
    ],
  },
};
export default nextConfig;

Verify: reproduce it on purpose

$ printf "import Image from 'next/image';export default function P(){return <Image src='https://images.unsplash.com/x' width={10} height={10} alt=''/>}\n" > app/page.tsx && npx next dev

Prevent

• Keep patterns as narrow as practical.
• Restart next dev after editing next.config.
• Proxy user uploads through your own CDN host.