CODEWITHSUNDEEP
javascriptreactjsimagecachingnext.js
Woodkah
Woodkah

Reputation: 29

How can I cache dynamic images in Next app?

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?

Upvotes: 2

Views: 27994

Answers (2)

Muhammad Jawad Mansoor
Muhammad Jawad Mansoor

Reputation: 348

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

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

},

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

Upvotes: -3

Naveen
Naveen

Reputation: 256

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.org/docs/api-reference/next/image#style

Upvotes: 6

Related Questions