How to customize the caching key of next/image?

[frankdilo]

I am using next/image to display some private images hosted on S3.

To display them, I generate pre-signed URLs:

https://<bucket>.amazonaws.com/<img_path>?AWSAccessKeyId=<access_key>

The access_key changes every time the image is requested to our server, but the part of the URL excluding the query string is stable. Any way to cache based on that?

We're doing this to reduce our Source Image usage on Vercel which has skyrocketed because of this issue.

[manema]

👋 👋 Did you find any solution? We are going through exactly the same issue.

[tasercake]

Running into a similar issue, though in my case I'm trying to get the Image component to cache my images (which come from pre-signed URLs) beyond their expiry period.

[hmartiins]

I'm having the same problem here..

[lelabo-m]

I am having the same problem using CloudFront in front of S3. The images are not cached anymore because the image URLs contain query params apparently.

[rexwangcc]

Any one has any idea on this? We are planning to implement our own cache with custom eviction policies based on browser APIs to handle this, which I hope was already provided...

[camnewnham]

I'm also facing this issue. My current workaround is to use a custom imageLoader that redirects to a serverless function which redirects to a resized image (and caches it without the hash or query string) - though this is far from ideal.

[sneko]

There is no browser magic here, but you can manipulate your S3 URLs so they look the same for a time: https://advancedweb.hu/cacheable-s3-signed-urls/

@frankdilo @manema @tasercake @hmartiins @lelabo-m @rexwangcc @camnewnham

[lelabo-m]

The thing is (or was at least): if an image url contains url parameters, it will be processed differently by next image component.
At least, it's what supposed to happen from my understanding but I have taken a good look in a while.

[sneko]

@lelabo-m from what I understood people were annoyed by the query parameter being volatil due to AWS S3 signing with tokens changing every seconds. So the link provided can help I think.

[camnewnham]

In our case we don't have control over the signing keys (for a frontend for a third party CMS). The CMS cycles signed URLs once per hour or so, but the images themselves don't change; hence why we want to be able to key next/image.

[jackeverydayzero]

I have the same issue! I am using Supabase however

[tselmek]

I'm having the same issue here. I'm using a third party CMS whose images come from a S3 bucket and I would like to optimize my images without overexceeding my quotas.

[jackeverydayzero]

I got a reply from vercel last year and they said if the URL is changing (because of a secret key or something) then there is nothing you can do.

[leerob]

You can now use minimumCacheTTL to change the cache-control:

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

And images.remotePatterns.search to filter on query strings or disallow all:

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '',
        pathname: '/account123/**',
        search: '',
      },
    ],
  },
}

[goodok21]

thanks for the answer @leerob , but if I do so, then https://<bucket>.amazonaws.com/<img_path>?AWSAccessKeyId=<access_key> will throw an error Invalid src prop, because search: '' disable any query string according to documentation.

What we are really need is to have ability add wildcard for search to bypass query string in image cache key,
but it's still adding same images to cache even if you omitting this field (according the documentation this should use wildcard)

[leerob]

You would then add search: 'AWSAccessKeyId' to allow that key, right?

[ibash]

For future travelers:

The solution we landed on was to proxy images through an api endpoint.
It's a bit clunky because we're effectively proxying images twice (once through an api endpoint and once through nextjs' image optimizer) but at least images get cached between requests.

When serving the page we rewrite all image urls to go through an api endpoint. We include cache key parameters in the query string, for example:

const input = new URL(data.imageUrl);
const url = `/api/image${input.pathname}?some_id=${data.id}`;
data.imageUrl = url;

Then have a handler in src/pages/api/image[...pathname].ts

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const url = getOriginalImageUrl(req.query.some_id)

  const response = await fetch(url);

  const contentType = response.headers.get("content-type");
  if (contentType) {
    res.setHeader("Content-Type", contentType);
  }

  const buffer = Buffer.from(await response.arrayBuffer());
  res.send(buffer);
}