Next.js Image "hostname is not configured" - Fix next/image

next/image only optimizes images from hosts you explicitly allow. Loading a remote image from an unlisted hostname throws - at build time for statically rendered pages, or at runtime otherwise.

What this error means

A page using next/image fails with Invalid src prop (<url>) on next/image, hostname "<host>" is not configured under images in your next.config.js`. For prerendered pages this surfaces during next build`.

next output

Error: Invalid src prop (https://cdn.example.com/a.jpg) on `next/image`,
hostname "cdn.example.com" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

Common causes

Remote host not in images config

The image URL points at a host not listed in images.remotePatterns (or the legacy images.domains), so Next refuses to optimize it.

Pattern too narrow for the URL

A remotePatterns entry exists but its protocol, hostname, or pathname does not match the actual src (e.g. a subdomain or a different path prefix).

How to fix it

Allow the remote host

Add the hostname to images.remotePatterns in next.config.

next.config.js

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

Bypass optimization where appropriate

For images you do not control or do not want optimized, set unoptimized on that image (or globally) instead of widening the allowlist.

TSX

<Image src={url} alt="" width={400} height={300} unoptimized />

How to prevent it

List every external image host in images.remotePatterns.
Constrain patterns by protocol and path, not just hostname.
Build statically rendered pages in CI so unconfigured hosts fail before deploy.