How to set up caching for images created by Next.JS <Image/>

Support
, , , ,
1

Hi,

I have come here as a last resort to get help on an issue that’s been bugging me.

Site: https://fategc.com

I’ve just published my next.js app online and so far in the last 6 hours it has already used up ~60GB of bandwidth. Upon investigating I’ve found out that the images aren’t getting cached and instead are getting refetched upon each page reload consuming a lot of bandwidth. These images are created by the <Image> component of next.js.

The main issue (I think) is that netlify responds back with the following header:

cache-control: public, max-age=0, must-revalidate

I don’t exactly know why this is happening but it seems to me like something is causing the images to be non-cacheable.

I have already tried setting up a netlify.toml file but no configuration has seemed to solve the issue so far. Netlify seemingly is able to find this file as upon deploying it shows me “4 header rules processed” (or however many I put in the netlify.toml for that deployment.

The URLs of the images follow this format:
https://fategc.com/_ipx/w_1080,q_75/%2Fservants%2Favatar%2F281.webp?url=%2Fservants%2Favatar%2F281.webp&w=1080&q=75

Here are all the configurations I have tried already:

[[headers]]
    for = "/_ipx/*"
    [headers.values]
        Cache-Control = '''
        public,
        max-age=3600'''
[[headers]]
    for = "/_ipx/w_1920,q_100/*"
    [headers.values]
        Cache-Control = '''
        public,
        max-age=3600'''
[[headers]]
    for = "/*.webp*"
    [headers.values]
        Cache-Control = '''
        public,
        max-age=3600'''
[[headers]]
    for = "/*.webp"
    [headers.values]
        Cache-Control = '''
        public,
        max-age=3600'''
[[headers]]
    for = "*.webp"
    [headers.values]
        Cache-Control = '''
        public,
        max-age=3600'''

None of these helped I’m still getting cache-control: public, max-age=0, must-revalidate.

Any help would be appreciated in finding out what is causing these headers to be sent back and how I can go about fixing it.

2

The images are served by Netlify Functions and headers in .toml do not apply to Functions. I believe, Next.js plugin handles caching headers itself because changing those have proven to cause issues in the past. This is not something you should fiddle with.