Storage does not work with Next.js image optimization ("url" parameter is valid but upstream response is invalid)

Bug report

Describe the bug

Next.js provides a convenient way to handle image optimization. This also works for remote images. Unfortunately, Supabase Storage does not work with it at the moment.

When trying to use it, the response from Next.js will respond with "url" parameter is valid but upstream response is invalid.

To Reproduce

1. Create a fresh Next.js project: npx create-next-app --use-npm
2. Add a next.config.js in project root to add your Supabase project as a domain the Next.js will use for images:

module.exports = {
  images: {
    domains: ['your-app-id.supabase.co'],
  },
}

your-app-id is the one where the image is hosted in the Supabase Storage.

1. Add an image component somewhere in your app:

import Image from 'next/image'
...
<Image
  src="https://your-app-id.supabase.co/storage/v1/object/avatars/public/your-file-name.jpg"
  alt="alt"
  width={500}
  height={500}
/>

For src, use the full path of the image. In my case, I use the getPublicUrl from the Storage API.

1. npm run build
2. npm run start

Looking at your browser’s dev tools, you can see the request for the image responds with status code 400 and "url" parameter is valid but upstream response is invalid.

Expected behavior

This error message is not unkown to Next.js, but it was fixed already. As other providers (you can e.g. try out an Imgur image) work fine, I assume this has something to do with how Supabase Storage handles these requests.

Screenshots

Request

Response

System information

• Version of @supabase/supabase-js: 1.25.1
• Version of Next.js: 11.1.2

[thebengeu]

@bennettdams Thanks for the suggestion! I agree that it’s counter-intuitive, added a note to the API of getPublicUrl().

[bennettdams]

@thebengeu @bnjmnt4n That was it! I had to make the bucket public via the UI.

I find it counter-intuitive that

• even though the policy of the bucket allows public SELECT
• and I use getPublicURL via an instanciated Supabase client (on the server)

…still was not enough for the image being available. Maybe this could be added to the API of getPublicURL?