Next.js Image Optimization returning 400 Bad Request when loading remote Supabase image
Unanswered
California pilchard posted this in #help-forum
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:
But the request fails with:
My
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?
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=75But the request fails with:
Status: 400 Bad Request
Method: GET
Referrer-Policy: strict-origin-when-cross-originMy
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
I use it to have better performance between my nextjs and my backend. But its break image idk why
/etc/hosts :10.0.0.2 my.domain.comI use it to have better performance between my nextjs and my backend. But its break image idk why