Fix next/image Hostname Not Configured in Next.js

You drop a remote image into <Image> and the page explodes:

Invalid src prop (https://cdn.example.com/photo.jpg) on `next/image`,
hostname "cdn.example.com" is not configured under images in your
next.config.js

next/image strictly allow-lists the hosts it will optimize — remote image servers are often shared between tenants, so allow-listing protects your optimizer from being pointed at arbitrary URLs. The fix is one config block, but the matching is unforgiving.

The fix: images.remotePatterns#

Add the host with explicit fields:

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

Then restart the dev server — next.config is read once at startup and is not hot-reloaded.

Wildcard rules#

* and ** behave differently — and ** only works at the edges:

• * — a single path segment, or a single subdomain
• ** — any number of trailing path segments, or any number of leading subdomains

// allows image.example.com, cdn.example.com, etc.
{ protocol: 'https', hostname: '**.example.com' }

Omitting protocol, port, pathname, or search makes them wildcard — the docs explicitly call this not recommended for security. In particular, omitting search allows all query strings.

Why not images.domains?#

You'll see older answers using images.domains: ['cdn.example.com']. It still works, but the official docs mark it deprecated since Next.js 14 "in favor of strict remotePatterns in order to protect your application from malicious users." domains is a flat hostname list with no wildcard, protocol, port, or pathname control. Migrate:

Escape hatches (and their cost)#

• unoptimized — a prop (or images.unoptimized: true globally) that skips the optimization pipeline and bypasses the allow-list. Right for tiny images, SVGs, or images that need auth headers (the optimizer doesn't forward them). Tradeoff: no resizing, no format conversion, no optimized caching.
• loader / loaderFile — offload optimization to Cloudinary, Imgix, Supabase, etc. via a function ({ src, width, quality }) => string. Tradeoff: a custom loaderFile requires Client Components and hands optimization to a third party.

Official references: next/image "Un-configured Host" error, Image component / remotePatterns, images config.

Related Articles#

• Fix Cumulative Layout Shift from next/image
• Set the next/image Component to 100% Height
• Deploy Next.js 15 to Vercel Without Environment Variable Errors