Why Next Image Returned 400 Only After Deployment

The browser error pointed at the wrong place

A card grid worked on my laptop, then every remote image returned 400 after deployment. I first checked CDN CORS. The failed request was actually /_next/image, so the Next server rather than the browser was refusing the source.

Compare the exact production URL

My local image host and the deployment host were different. I copied the production URL and allowed its path deliberately.

images: {
  remotePatterns: [{
    protocol: "https",
    hostname: "cdn.example.com",
    pathname: "/uploads/**",
  }],
}

The confusing part was that changing next.config.ts and restarting the process changed nothing. This setting is read at build time. A fresh build fixed it.

Before calling it a CORS issue

• Check whether the request URL starts with /_next/image.
• Match protocol, host, and path against remotePatterns.
• Build and deploy again after changing the config.
• Open the original image URL separately.

Separating optimizer failures from CDN failures made the next incident much faster to diagnose.