I'm getting response from api that is a list of objects. The object contains property imageUrl, which is a link to to the image. How can I set cache-control to that image?

I'm getting response from api that is a list of objects. The object contains property imageUrl, which is a link to to the image. How can I set cache-control to that image?

• javascript
• reactjs
• image
• caching
• next.js

• you can write proper code to get exact answer – Avani Bataviya Commented Jul 22, 2021 at 9:55
• That wasn't very helpful – Woodkah Commented Jul 22, 2021 at 10:13
• 1 Couple of questions: 1) Are you using next/image ponent to render your images; 2) If yes, are you using the Next.js' built-in Image Optimization or a cloud provider's optimization (see https://nextjs/docs/basic-features/image-optimization#loader)? – juliomalves Commented Jul 22, 2021 at 15:51

2 Answers 2

Add the below code in the "next.config.js" file of your project to cache images for 60 seconds:

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

You can change the cache time in secs instead of 60.

Here is thr Next.js official documentation https://nextjs/docs/api-reference/next/image#style

The above answer by Naveen didn't work for me.

images: {
remotePatterns: [
  {
    protocol: 'https',
    hostname: 'host.',
    port: '',
    pathname: '/pathname/**',
  },
],

},

add the above code to next.config.js (from Nextjs documentation).