Invalid hostname provided to Image component in next/image configuration

The direct fix

The render-time error Invalid src prop ... hostname is not configured means the URL's host is not in your next.config.js allowlist. The optimizer refuses to fetch it. For a single failing host, add one scoped entry:

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

Then restart the dev server — next.config.js changes are not hot-reloaded, which is the most common reason a "correct" config appears not to work. Verify by requesting /_next/image?url=... directly and confirming a 200 response.

Security implications of migrating from domains to remotePatterns

images.domains is a legacy string array. Each entry implicitly allows HTTP and HTTPS, any port, and any path on that host. That is broader than most teams intend: the Next.js image optimizer fetches arbitrary URLs server-side, so an over-broad allowlist effectively turns your server into a partial open proxy for remote content.

remotePatterns tightens this in three ways:

• Protocol enforcement — set protocol: 'https' so plain-HTTP sources are rejected.
• Path scoping — pathname: '/images/**' prevents the optimizer from proxying unrelated content on the same host.
• Explicit hostnames — exact hosts and bounded wildcards replace blanket domain entries.

Avoid hostname: '**'; it negates the entire security benefit. Both keys can coexist, but mixing them is confusing — pick remotePatterns and convert every domains entry.

Wildcard matching: nested subdomains vs apex

This is where most "still failing after config change" reports come from:

The apex domain is never covered by a subdomain wildcard — list it as a separate entry with hostname: 'example.com' if you need it. Test the boundaries directly: request images from a.example.com, a.b.example.com, and example.com to confirm which pattern your asset URLs actually require.

Version caveat

Wildcard handling and deprecation warnings for domains have shifted across Next.js releases. The behavior above reflects the documented Next.js 14-era semantics; run npx next info and check your installed version against the official remotePatterns documentation for that major version before relying on edge-case matching. As a final sanity check, request an image from a host you did not whitelist and confirm it is still rejected — this verifies your migration did not accidentally widen the allowlist.