Fix guides / Next.js: next/image "hostname is not configured"

How to fix Next.js "Invalid src prop ... hostname is not configured under images"

The page crashes with Invalid src prop (https://abcd.supabase.co/storage/v1/object/public/avatars/me.png) on `next/image`, hostname "abcd.supabase.co" is not configured under images in your `next.config.js`. Remote images worked as a plain img tag, so what changed?

Why it happens

The Next.js Image component optimizes images on your server. To stop strangers using your site as a free image proxy, it only loads remote images from hosts you list in the config. Apps built in Cursor or v0 hit this the moment they show user uploads from Supabase Storage, Firebase Storage, Cloudinary, or avatars from Google sign-in.

Fix: allow the host with remotePatterns

// next.config.js (or next.config.mjs with export default)
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'abcd.supabase.co',
        pathname: '/storage/v1/object/public/**',
      },
      { protocol: 'https', hostname: 'lh3.googleusercontent.com' },
      { protocol: 'https', hostname: 'firebasestorage.googleapis.com' },
    ],
  },
};

Use your own project host from the error message. Keep the list tight: a pattern like hostname: '**' works but lets anyone use your server to resize any image.

Then restart

Config changes are not hot reloaded. Stop and restart next dev, and redeploy for production.

Related cases

  • Older guides say images.domains. That option is deprecated. Use remotePatterns.
  • Static export. With output: 'export' there is no server to optimize images, so set images: { unoptimized: true } or use a loader.
  • Signed URLs. Private Supabase files use /storage/v1/object/sign/, so add that path too. Signed URLs expire, so generate them when the page renders.
  • Unknown hosts from users. If people can paste any image link, render those with a plain img tag instead.

Check the fix

  1. The image loads and the request goes to /_next/image?url=... with status 200.
  2. No errors in the terminal or browser console.
Still stuck? No shame in it: these bugs hide in places your AI builder cannot see. Send me the error and your repo and I will fix it as a pull request within 24 hours, explained in plain English, for $49. Several things broken? The $149 Full Rescue covers up to 3 issues plus a security pass, within 72 hours. Not fixed means full refund.
Quick Fix, $49Full Rescue, $149Ask first

Last updated 2026-10-21.