Next.jsImages

next/image: hostname is not configured

Error: Invalid src prop (https://images.unsplash.com/photo.jpg) on `next/image`, hostname "images.unsplash.com" is not configured under images in your next.config.js

In short: next/image only loads remote pictures from hostnames you list in next.config. The one in src isn't on that list.

Why it happens

Next.js optimizes remote images through its own loader, so it requires an allow list (images.remotePatterns today; the older images.domains still works but is deprecated). AI-generated pages often point src at Unsplash, a CMS, or Supabase Storage without adding the hostname. Local files under public/ should be a path like /hero.png, not a full http://localhost URL.

How to fix it

1. Open next.config.ts (or .js / .mjs) and add the hostname under images.remotePatterns, including protocol and a pathname if you want to narrow it.
2. Restart next dev. Config changes are not picked up by a hot reload.
3. For files you ship with the app, put them in public/ and pass a root-relative path (/photo.jpg), not an absolute localhost URL.
4. On Vercel or elsewhere, redeploy after the config change.
5. If src is a user-supplied URL, allow only the CDN or storage host you actually use, not every hostname.

Example

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      { protocol: "https", hostname: "images.unsplash.com", pathname: "/**" },
      { protocol: "https", hostname: "your-project.supabase.co", pathname: "/storage/v1/object/public/**" },
    ],
  },
};

export default nextConfig;

Copy-paste fix prompt

I'm getting this error in my app:

Error: Invalid src prop (https://images.unsplash.com/photo.jpg) on `next/image`, hostname "images.unsplash.com" is not configured under images in your next.config.js

[Paste the full error, stack trace, and the file it points to here]

Likely cause: next/image only loads remote pictures from hostnames you list in next.config. The one in src isn't on that list.

Task: Add a tight images.remotePatterns entry for each remote hostname next/image actually uses, and change any local images to public/ paths. Don't disable the image optimizer globally.

Rules:
- First explain the root cause in 2 sentences and list the files you'll change.
- Make the smallest change that fixes it. Don't refactor unrelated code.
- Don't disable security or checks (RLS, auth, signature verification, type checking, CORS allow-all) to make the error disappear.
- Never print or hard-code secret keys.
- Finish by telling me exactly how to verify the fix.

Common with: Cursor, v0, Claude Code. Last reviewed 2026-11-15.