{
  "id": 2279375,
  "title": "Invalid src prop… hostname is not configured: It's One File, Not Two",
  "url": "https://urgent.news/2026/08/21/invalid-src-prop-hostname-is-not-configured-its-one-file-not-two",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-08-21T01:52:23.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/brokeinprod/invalid-src-prop-hostname-is-not-configured-its-one-file-not-two-1phf"
  },
  "original_language": "en",
  "account": "The \"Invalid src prop: hostname is not configured\" error occurs when the remote host is not listed in the `images.remotePatterns` in the `next.config.ts` file. The issue arises because the next/image component, which renders images, does not trust hosts that haven't been explicitly whitelisted. The error message indicates that the hostname `your-store.public.blob.vercel-storage.com` is not configured under `images` in the `next.config.js` file.\n\nThe root cause is that next/image optimizes images by fetching server-side, resizing them, converting them to modern formats, and serving them from the domain of the specified host. Opening an unrestricted src would allow an optimizer to act as a free proxy, making it insecure. Therefore, Next.js requires an explicit allowlist through `images.remotePatterns`.\n\nThe hostname must be added exactly and case-sensitively, including the protocol, port, and pathname. A too-shallow pathname or a wildcard match (e.g., `*.public.blob.vercel-storage.com`) is insufficient. Additionally, using the deprecated `images.domains` format is discouraged, as it has been replaced by `remotePatterns` since Next.js 14.\n\nTo resolve the issue, add the host to `remotePatterns` in the `next.config.ts` file. There are two ways to do this: import the `NextConfig` type and define the `images` property with `remotePatterns`, or use a shorthand that takes a URL directly. After making the change, restart the development server, as the config is read once at startup and isn't hot-reloaded.\n\nThe error message is helpful, as it guides the fix by pointing to the `nextjs.org` documentation on the issue. It also highlights the security benefits of the allowlist, which prevents the image optimizer from acting as a free proxy. Lastly, when using a strict Content-Security-Policy (CSP), it's generally not necessary to add the Blob host to `img-src`, as the allowlist in `remotePatterns` serves the same purpose.",
  "summary": "--- title : \" Invalid src prop… hostname is not configured: It's One File, Not Two\" published : true description : \" The next/image \\\" hostname is not configured \\\" error means your remote host isn't in remotePatterns — not your CSP. Here's the real one-file fix and why.\" tags : nextjs, webdev, debugging, react canonical_url : https://brokeinprod.dev/debugging/next-image-hostname-not-configured…",
  "key_points": [],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}