Next.js Image Component Not Caching Properly in Production with Custom Domains
I'm working with an scenario where the Next.js Image component does not seem to cache images properly when served from a custom CDN domain. In my development environment, everything works fine, but once I deploy the project, images load slowly, and I notice a important amount of repeated network requests for the same images. I have also configured the caching headers on the CDN, but it doesn't seem to have an effect. Here's a snippet of how I'm using the Image component: ```jsx import Image from 'next/image'; const MyImageComponent = () => { return ( <Image src='https://my-custom-cdn.com/images/my-image.jpg' alt='My Image' width={800} height={600} priority /> ); }; ``` In my `next.config.js`, I have the following settings: ```javascript module.exports = { images: { domains: ['my-custom-cdn.com'], minimumCacheTTL: 60, }, }; ``` I've tried adjusting the `minimumCacheTTL`, and I also looked into my CDN settings, ensuring proper cache control headers are set. However, I still see the Chrome DevTools Network tab showing "Status Code: 200" for the repeated requests instead of using cached versions. Is there something I'm missing in my Next.js configuration or in how I'm serving images from the CDN? Any insights would be appreciated! What's the best practice here? For context: I'm using Javascript on Linux.