Next.js Discord

Discord Forum

Next.js Image Optimization returning 400 Bad Request when loading remote Supabase image

Unanswered
California pilchard posted this in #help-forum
Open in Discord
California pilchardOP
Hey everyone, I’m stuck with a 400 Bad Request coming from Next.js Image Optimization and I can’t figure out why.
I’m trying to load this image through the Next.js image loader:
https://domain.com/_next/image?url=https%3A%2F%2Fmy.domain.com%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fplaylist_posters%2F50-0.08569632342017885.jpg&w=384&q=75

But the request fails with:
Status: 400 Bad Request
Method: GET
Referrer-Policy: strict-origin-when-cross-origin

My next.config.js is configured with:
images: {
  remotePatterns: [
    {
      protocol: 'https',
      hostname: 'my.domain.com',
      pathname: '**',
    },
  ],
},

The image exists and can be fetched directly from the backend URL, but the optimized version fails only through /_next/image.
Has anyone seen this issue before?
Is there a known limitation or something specific required in remotePatterns for Supabase public buckets or signed URLs?

3 Replies

California pilchardOP
Well Ive try so many thing I still have the problem
Its working on dev, on local production build, but when the app is deploy I have an error
California pilchardOP
Okay Ive found the cause but idk why isnt working. I have on my VPS hosting my NextJS app, in /etc/hosts :
10.0.0.2 my.domain.com

I use it to have better performance between my nextjs and my backend. But its break image idk why