Next.js next/image unconfigured host: fix remotePatterns on Vercel

Why the image is rejected

Next.js rejects remote images whose URLs do not match the images.remotePatterns allowlist. The mismatch might be hostname, HTTPS versus HTTP, an asset subdomain, an unexpected path or an unapproved query string. A successful Vercel deployment can therefore still show broken images at runtime.

Read the full remote image URL and compare it with next.config.js or next.config.ts. The URL you authorize should be controlled by you or a provider you trust.

Allow only the actual image host

Add a pattern for the real hostname and the narrowest stable path that includes your images. Omitting search allows different query strings; setting search to an empty string forbids them. Choose consciously instead of accepting every host with a wildcard.

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

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [{
      protocol: "https",
      hostname: "assets.example.com",
      pathname: "/product-images/**"
    }]
  }
};
export default nextConfig;

Check production image URLs

The CMS may serve thumbnails from cdn.example.com while the page links to example.com. Signed image URLs may include changing query strings. Test the exact URL returned in production; a pattern that matches your development fixture may not match the real CDN.

Avoid the old broad images.domains approach when remotePatterns can be made precise. Remote image allowlists are a security boundary as well as a troubleshooting setting.

When this is not a build failure

An unconfigured-host error is often a runtime image response, not the cause of the entire deployment failing. Inspect the image request in DevTools separately from build logs.

Reference: Next.js docs, next/image Un-configured Host. DeployDoctor scans repositories for a number of configuration hazards, but browser image requests still need an end-to-end test.