Next.js Image Component Not Caching Images Correctly with S3
I'm integrating two systems and I'm wondering if anyone has experience with I've searched everywhere and can't find a clear answer. I'm encountering an issue where the Next.js Image component isn't caching images served from an S3 bucket correctly. I've set up my Next.js application to pull images from an S3 bucket, but I notice that the images are being re-fetched every time I navigate between pages, which is severely impacting performance. I expected the images to be cached, but instead, I see network requests firing in the developer tools each time. I'm using Next.js version 12.2.0 and the following configuration in my `next.config.js`: ```javascript module.exports = { images: { domains: ['mybucket.s3.amazonaws.com'], loader: 'default', }, }; ``` On the S3 side, I've confirmed that the images are set to be publicly accessible and have the correct `Cache-Control` headers. Here’s an example of how I’m using the Image component in my code: ```javascript import Image from 'next/image'; const MyComponent = () => { return ( <Image src="https://mybucket.s3.amazonaws.com/image.jpg" alt="My Image" width={500} height={300} /> ); }; ``` Despite having the `Cache-Control` headers set to `max-age=31536000` on the S3 bucket, I still see the images being fetched again on page transitions. I’ve tried clearing my browser cache and testing in incognito mode to rule out caching issues on my end. Am I missing something in the configuration, or is there a specific way to make Next.js leverage caching for images served from an external source like S3? Any insights or suggestions would be appreciated! For context: I'm using Javascript on Windows. I'm working in a Ubuntu 22.04 environment. What are your experiences with this? My development environment is Ubuntu 22.04. Cheers for any assistance!