← All errors

Next.js Image: hostname is not configured under images in next.config.js

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

In one sentence: You used next/image with a picture from another website, and Next.js blocks outside image hosts until you allow them.

What it means

The Next.js `<Image>` component optimizes images on your server. To stop strangers from using your app to resize any image on the internet, it only accepts outside images from hosts you list in `next.config`.

It shows up the first time your app loads pictures from Supabase Storage, Unsplash, Cloudinary, an S3 bucket or user avatars from Google or GitHub.

Common causes

• Using `<Image src="https://...">` with a domain that isn't listed in `images.remotePatterns`.
• The domain is listed, but the protocol, subdomain or path doesn't match (for example `cdn.example.com` vs `images.example.com`).
• `next.config` was edited but the dev server wasn't restarted.

How to fix it

1. Copy the hostname from the error message exactly.
2. Add it to `images.remotePatterns` in `next.config.js` / `next.config.ts` (the older `images.domains` setting is deprecated).
3. For Supabase Storage use your project host, like `<project-ref>.supabase.co`, with pathname `/storage/v1/object/public/**`.
4. Restart the dev server (config changes aren't hot-reloaded) and redeploy.

// next.config.ts
const nextConfig = {
  images: {
    remotePatterns: [
      { protocol: "https", hostname: "images.example.com" },
      { protocol: "https", hostname: "abcd1234.supabase.co", pathname: "/storage/v1/object/public/**" },
    ],
  },
};
export default nextConfig;

Tried this and it's still broken? Paste your exact error for a free explanation of your specific case.

Prompt to paste into your AI tool

Next.js says the image hostname is not configured under images in next.config. Add only the hostname from this error to images.remotePatterns (not the deprecated images.domains), keep the rest of next.config the same, and remind me to restart the dev server.

Related errors

• TypeError: Cannot read properties of undefined
• CORS error: blocked by CORS policy
• Hydration failed: server HTML didn't match the client (Next.js)
• Module not found: Can't resolve '...'