Get a $149 diagnosis

Error library

Next.js next/image un-configured host

next/image only loads remote images whose URL matches images.remotePatterns in next.config.js. Add the exact protocol, hostname, port and pathname of your image source (for example your Supabase Storage domain).

Cause: The image src hostname (or protocol/port/path) isn't matched by images.remotePatterns.

How to fix it

  1. Copy the image URL from the error.
  2. Add a matching entry to images.remotePatterns (protocol, hostname, port, pathname).
  3. Remember example.com and assets.example.com are different hostnames.
  4. Restart the dev server / redeploy after changing config.

Example

Illustrative example, not from a customer project.

  images: {
+   remotePatterns: [new URL('https://xyz.supabase.co/storage/v1/object/public/**')],
  },

FAQ

Can I allow every hostname?

It's possible with wildcards, but Next.js recommends being specific to prevent abuse of your image optimizer.

What about images.domains?

That's the older config; current docs use remotePatterns.

Get a $149 diagnosis See pricing Launching soon? The Launch Path gets you ready for $1,195 flat.

$149Get a $149 diagnosis