Invalid src prop… hostname is not configured: It's One File, Not Two

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.

The 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`.

The 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.

To 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.

The 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.