Nextjs Image Cache Invalidation

Question

I'm using aws s3 buckets to store my assets. When any of the existed assets is changed from the front-end (eg: client changed his profile image) the backend I made will change the asset only without touching the url. Now here is my problem in my website I'm using revalidate in getStaticProps but still because the link is the same, the cached version of the image is not updating so any way to update those images caches programmatically?

By the way when I click on DevTools and see the preview from the Network tab it shows the right version of the asset

Answer 1

Update November 2025

If you're deploying to Vercel, you can invalidate by providing the source image.

• https://vercel.com/changelog/you-can-now-invalidate-the-cdn-cache-by-providing-a-source-image

----------

Previous answer

Next.js doesn't currently provide a way to on-demand revalidate optimized images.

If the image is imported statically, for example import img from './me.png', then it will automatically be hashed by content, so there is no need to invalidate.

If the image is a remote url, for example hosted on an s3 bucket, then you can "invalidate" by adding a version to the query string such as <Image src="https://example.com/me.png?v=2" />.

WARNING: Do NOT use a dynamic timestamp. It will cause a cache miss every render causing extremely slow and very expensive requests depending on the cost of your compute/storage.

Sources:

• Next.js Caching Documentation
• Vercel Caching Documentation