minimumCacheTTL for images not setting correct caching header?

[GregoryWullimann]

I'm using the next/image component to load my images. All images are stored in the /public folder, but there are dynamic images (i.e. not available at build time) so I'm loading them as Remote images instead of local. So a request looks like this:

https://mydomain.com/_next/image?url=https%3A%2F%2Fmydomain.com%2Fimages%2image.png&w=828&q=75

Right now it works but the Cache-control header is "wrong". For each image it will make a small request to check if the content changed, and this slows the loading of the page. What I want is to set the max-age to a higher number and not 0.

Cache-Control: public, max-age=0, must-revalidate

I tried to use minimumCacheTTL in the next.config.js file but it didn't change the header, I also tried to set the header directly for images but also didn't work.

Not sure what I'm doing wrong or if I am missing something.

My attempts:

images: {
		domains: ["mydomain.com"],
		minimumCacheTTL: 60,
	},

async headers() {
		return [
			source: '/:all*(svg|jpg|png)',
                        locale: false,
                        headers: [
                          {
                            key: 'Cache-Control',
                            value: 'public, max-age=9999999999, must-revalidate',
                          }]
}

[lhguerra]

+1
It works nothing like the docs, that say caching is automatic. And also setting minimumCacheTTL does nothing. I'm almost giving up using this component

[timothyk0908]

Tried using minimumCacheTTL without success either... the Cache-Control is never set whatever value I input in next.config.js

[FilipChalupa]

@GregoryWullimann have you found a way to set max-age cache-control to some other value?

[ticpoi]

I set the minimumCacheTTL 600000 but it looks like header still shows 60 seconds. Is there anyone find information about this?

[louisthomaspro]

Same for me, I set minimumCacheTTL to 31536000 but it shows max-age=60

[deniapps]

It looks like this issue was created over a year ago. @GregoryWullimann, did you manage to find a solution for this problem?

I'm having trouble getting minimumCacheTTL and Cache-Control to work with the Next.js Image component, even though I followed the documentation at https://nextjs.org/docs/pages/api-reference/components/image#minimumcachettl. Specifically, I'm using a local image and neither of these properties seems to have any effect. I was wondering if anyone could provide some assistance or guidance on how to solve this issue.

[alivarastepour]

same here. minimumCacheTTL has no effect at all.

[magicspon]

@leerob any thoughts?

[holicreact]

It works when you build and run on the local server. But it doesn't work when you deploy it to Vercel

[MYKEU]

Facing the exact same issue here - not sure why they has been no updates regarding this

[holicreact]

I hope the next team sees this article

[vithoSmile]

[email protected]

Seems it expose default "parameters" of max-age=0 on developer mode (npm run dev)
But once compiled : npm run build + npm start then the minimumCacheTTL is exposed in max-age.

[holicreact]

@vithoSmile npm build => npm when start it works fine but it doesn't work when deployed to Vercel

[Borche]

Having the same problem where minimumCacheTTL has no effect at all.

[corymsmith]

Same issue over here and the load times from Vercel are atrocious, seeing 2-6 seconds for each image.

[jordanvector]

@Borche @corymsmith can't you override header values in next.config.js? We had the same issue but were able to override the default max-age's on assets with something like this in next.config.js

async headers() {
        return [
          {
            headers: [
              {
                key: 'Cache-Control',
                value: 'public, max-age=31536000, immutable',
              },
            ],
            source: '/:path(.+\\.(?:ico|png|svg|jpg|jpeg|avif|gif|webp|json|js|css|mp3|mp4|ttf|ttc|otf|woff|woff2)$)',
          },
        ]
    }

[philwolstenholme]

Related #52569?

[boar-is]

Fortunately, I found out that setting quality to anything but 75 (default value) fixes the issue and now minimumCacheTTL is respected.