Nextjs Image component revalidate/clear Image cache

[CihanDenizZengin]

Problem: In a Next.js application, an image hosted on a CDN is being rendered using the Next.js Image component. If the content of the image stored on the CDN changes (while keeping the same URL), the Next.js application continues to render the image using the cached version of the old image.

Example:

Old image URL: cdn.example.com/images/image1.jpg
New image URL (changed, but URL remains the same): cdn.example.com/images/image1.jpg
The website continues to show the old image instead of the updated one until the cache expiration time is reached.

Current Solution: Currently, while rendering images, I add a query parameter ?UpdatedAt=${url.UpdatedAt} to the end of the URL. However, this creates a new issue: it leaves behind multiple cached versions of the same image for each change, causing the application to bloat.

Possible Easiest Solution:
A potential simple solution could involve an API accessible via import Image_Cache from "next/image"; where a specific URL can be passed as a parameter to the API, and the API would clear the cache for the provided image URL.

Usage Example of the Solution:
When a user wants to change an image, they can send a request to /api/revalidate-image-cache/route.ts, which can call Image_Cache within the API, pass the URL to the API, and clear the current image cache.

[CihanDenizZengin]

Hello,

This is my first time making a feature request, so I apologize if I've breached any guidelines. Thank you in advance for any feedback or guidance you can provide.

If you have any comments or alternative solutions regarding the proposed API, please feel free to share them.

Thank you!

[TomJD]

Hello, did you find any better solution to this for a per-image basis? We are now facing the same issue

[notflip]

Wondering the same thing, did you find a solution?