Questions about next/image caching in the Next.js Pages Router

[shape1541]

Summary

I have a question regarding the next/image component in the Next.js Pages Router. Although I am using Next.js 13, I assume the behavior is similar or the same in the latest version, Next.js 14.

According to the official documentation for next/image in the Pages Router (https://nextjs.org/docs/pages/api-reference/components/image), the minimumCacheTTL property can be set like this:

module.exports = {
  images: {
    minimumCacheTTL: 60,
  },
};

I’m curious about the criteria for determining the appropriate minimumCacheTTL value. For instance, if images in a community post or e-commerce product are updated frequently, and a user revisits the page before the cache duration expires, will they still see the old image because the cached version is still valid?

Additionally, would this be an issue only if the image URL remains the same? If the image’s URL changes after an update, does it bypass the cache and display the new image? How can I handle these scenarios efficiently?

Additional information

No response

Example

No response

[jattu8602]

From my understanding, minimumCacheTTL controls the minimum amount of time that Next.js Image Optimization can cache an optimized image before it needs to revalidate or fetch a fresh version.

Scenario 1: Image content changes, but the URL remains the same

Suppose you have:

https://example.com/product.jpg

If the image is updated on the server but the URL stays unchanged, users may continue seeing the cached version until the cache expires.

For example:

images: {
  minimumCacheTTL: 3600, // 1 hour
}

If a user visits the page, the optimized image may be cached for up to 1 hour. If the image content changes during that period, users could still receive the older cached version until the cache is refreshed.

Scenario 2: Image URL changes after an update

If the URL changes, such as:

https://example.com/product.jpg?v=1

becoming

https://example.com/product.jpg?v=2

or

https://example.com/product-v2.jpg

then browsers, CDNs, and Next.js treat it as a completely new resource.

In this case, users will receive the updated image immediately because the cache key is different.

Recommended approach for frequently updated images

For applications such as:

• Community posts
• User profile pictures
• Product catalogs
• CMS-managed content

it is generally recommended to use cache-busting/versioned URLs rather than relying on a very low minimumCacheTTL.

Examples:

/avatar.jpg?v=123
/product.jpg?v=20240916
/image.abc123.jpg

This allows you to:

• Keep longer cache durations for better performance
• Reduce bandwidth usage
• Ensure users receive updated images whenever the content changes

How I usually think about minimumCacheTTL

• Images rarely change → use a higher value.
• Images change frequently but URLs are versioned → higher value is still fine.
• Images change frequently and URLs remain identical → consider a lower value or implement URL versioning.

So, if I understand correctly, the primary concern is not the cache duration itself, but whether the image URL changes when the image content changes. Using versioned URLs appears to be the most reliable strategy for balancing performance and freshness.