CODEWITHSUNDEEP
next.jsnextjs-image
Edgaras
Edgaras

Reputation: 11

How can I cache image assets in NextJS?

The NextJS docs specifically states (https://nextjs.org/docs/api-reference/next.config.js/headers#cache-control):

You cannot set Cache-Control headers in next.config.js file as these will be overwritten in production to ensure that API Routes and static assets are cached effectively.

What's an alternative way to cache image assets in NextJS?

I tried using the NextJS Image component, but it messes up my self-hosted image urls with proprietary NextJS urls. I want to evade that.

Upvotes: 0

Views: 5249

Answers (1)

timjanssen
timjanssen

Reputation: 19

When making use of the <Image /> component, NextJS will automatically store and serve optimized versions it stores server-side. That is the reason why you see the NextJS URL's (as that is where the new optimized and cached images are at). If you do not want these optimizations you can use a regular <img /> element, because NextJS requires the use of it's backend services to optimize the image for you.

Upvotes: 1

Related Questions