Next.js Image Component scenarios to Load WebP Format for Certain URLs on SSR
I'm converting an old project and I'm having trouble with I tried several approaches but none seem to work. I've searched everywhere and can't find a clear answer. I'm maintaining legacy code that I'm experiencing an scenario where the Next.js Image component seems to unexpected result loading WebP images for specific URLs when using server-side rendering (SSR). The images load correctly in development mode, but when I build the application, several images are served as a fallback to JPEG instead of WebP, which impacts performance significantly. For instance, I have the following code in my component: ```jsx import Image from 'next/image'; const MyComponent = () => { return ( <Image src="https://example.com/image.webp" alt="Sample Image" width={800} height={600} quality={75} /> ); }; export default MyComponent; ``` In my `next.config.js`, I've configured the image domains like this: ```javascript module.exports = { images: { domains: ['example.com'], }, }; ``` However, when I check the network tab in production, I see a 404 behavior for `image.webp` and it falls back to `image.jpg`, which is not what I expect. I've verified that the WebP images are accessible directly in the browser. I've also tried prefetching the images manually and adjusting the quality settings but to no avail. Interestingly, when I run the app in development mode, the WebP images load fine without any issues. Is there something about how Next.js handles SSR that I might be missing? Any suggestions on troubleshooting this scenario would be greatly appreciated. For context: I'm using Javascript on Ubuntu. What am I doing wrong? The project is a application built with Javascript. Any ideas how to fix this? What am I doing wrong? I'm working in a macOS environment. Thanks for your help in advance! Thanks for your help in advance! I'd really appreciate any guidance on this.