Keyboard shortcuts

jk
move through the list
↵
open the selected item
a
ask a question
nucw
tabs: new, unanswered, active, top
⌘↵
post the answer you are writing
/or⌘K
search
t
switch theme
?
this list
AskVibe
AskSign in
Demo, all content is generated
Question

next/image with Supabase storage url: hostname is not configured under images

Solved · 193 views · asked by anouk · edited
v0nextjssupabaseperformance

v0 swapped my <img> tags for <Image> and now the product page crashes with:

Error: Invalid src prop (https://abcdxyz.supabase.co/storage/v1/object/public/products/lamp.jpg) on `next/image`, hostname "abcdxyz.supabase.co" is not configured under images in your `next.config.js`

What do I put there? I don't want to allow every domain.

What I’ve tried

Added domains: ['supabase.co'] to next.config.js, same error.

Comment
Is the bucket public? The path you pasted is the public URL format, so that part looks right. jb_supa · edited

3 answers

Marked as helpful by the asker
mei_lin · edited

The match is exact, supabase.co does not cover abcdxyz.supabase.co. And domains is deprecated, use remotePatterns:

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "abcdxyz.supabase.co",
        pathname: "/storage/v1/object/public/**",
      },
    ],
  },
};

Restart npm run dev after changing the config, it is not hot-reloaded.

Comment
the restart was the missing piece, works now anouk · edited
The restart thing gets everyone at least once. clara_w · edited
jb_supa · edited

Small heads-up: every image now goes through Vercel's image optimization, which counts toward your usage. For a shop with a few hundred products that is fine. If it grows, look at resizing on upload so you are not optimizing 4000px originals.

Comment
clara_w · edited

If your images are already sized properly on upload you can also set unoptimized on those <Image> tags. You keep layout benefits (no shift with width/height) without going through the optimizer.

Comment

Related

Supabase logs show every product page query running twice (generateMetadata + page)solved
Images in my app break after an hour, signed URLs from a private bucketsolved
Every page on my Vercel app takes 1.5s+, Supabase is in Frankfurtsolved
Photo gallery burned through my Vercel image optimization quota in a weeksolved
Vercel says I used 80% of Fast Origin Transfer, site has almost no visitorssolved

Your answer

Sign in to write an answer