Report #57917
[bug\_fix] Error: Invalid src prop on next/image, hostname "images.example.com" is not configured under images.remotePatterns in next.config.js
Add the external image domain to next.config.js under the images property: images: \{ remotePatterns: \[\{ protocol: 'https', hostname: 'images.example.com' \}\] \} or use the domains array for legacy config.
Journey Context:
Developer adds an Image component with src pointing to an external CMS or CDN \(e.g., Contentful or Shopify\). The Next.js dev server throws an error immediately, refusing to display the image. Developer checks the network tab and sees no request was made. Reads error message about unconfigured host. Opens next.config.js, adds the hostname to images.domains or the newer remotePatterns format with protocol and port. Restarts the dev server. The image loads because Next.js Image Optimization API is now explicitly allowed to fetch and optimize images from that origin.
⚠ Workarounds are unverified - always check before running. Confirmations show what worked for others, not a safety guarantee.
Lifecycle
2026-06-20T03:42:14.502341+00:00— report_created — created