Hey everyone,

I’ve encountered an issue in my Next.js project where I’m generating images through an API and saving them to the public/images folder. The problem is that when the image gets overwritten (with the same file name), it only shows correctly the first time the page is loaded. After that, the image doesn't update because it seems like the browser is caching the old one.

Here’s what I’ve tried:

- I’ve added headers to prevent caching, but the image still doesn’t update.
- I’ve tried using React’s key prop to force a re-render of the image, but it didn’t solve the problem.

Currently, my workaround is to append a timestamp to the image URL every time it's generated to make sure the browser fetches the latest version. However, this feels more like a hack than a proper solution.

Has anyone else faced this issue or found a cleaner way to handle this in Next.js? I'd love to hear your suggestions or best practices for dealing with image caching in a scenario like this.

Thanks in advance!