Cache assets from public folder

[kryver]

Hi, we are having trouble setting custom cache behaviour for our assets in public folder, such as font files, svg and png images assets. By default we seem to get
cache-control: public, max-age=0

which differs for example from _next/static which has
cache-control: public, max-age=31536000, immutable

I would have expected assets put in public folder to have some default cache behaviour?

I've tried setting custom header in next.config.js like:

  async headers() {
    return [
      {
        source: '/fonts/Black.woff2',
        headers: [
          {
            key: 'cache-control',
            value: 'public, immutable, max-age=31536000',
          },
        ],
      },
    ];
  },

But nothing happens, at least not when testing locally. Then there is also this: https://nextjs.org/docs/api-reference/next.config.js/headers#cache-control which seems to indicate that even if I did get this to work, it would in fact not work in production?

We are using a cdn in front of our next server (not using Vercel) so we might have other ways around this, but it seems strange to me.

[normenster]

I can confirm that cache control won‘t be overwritten in public folder. I dont understand
why the default max age for
public folder assets is zero even in production.

[woedoe]

I'm having the same problem. I use SSG with getStaticProps. I expected the files from the public folder to have cache-control: public, max-age=31536000, immutable.
How can I set the header to cache-control: public, max-age=31536000, immutable for the files in the public folder when using SSG and next export?

[cbdeveloper]

I also have the same issue. Deploying on Vercel using Next v12.3.0. Static files being served with max-age=0.

Any workaround to this? Apparently we cannot set Cache-Control on next.config.js anymore.

https://nextjs.org/docs/api-reference/next.config.js/headers#cache-control

[AdamZaczek]

This issue is a showstopper for us. We cannot update the app for our users and we have thousands who are stuck with the old cache for good.

Vercel team, please, fix this issue.

[Knorway]

you may want to try header configuration file the platform you use provides. one that looks like below:

/*.jpg
  cache-control: public, max-age=14400

vercel: https://vercel.com/docs/concepts/edge-network/headers
cloudflare pages: https://developers.cloudflare.com/pages/platform/headers

[SanderRuusmaa]

Have there been any updates/workarounds on this issue? Is there any way to overwrite the "default" non-caching behaviour of /public assets?

[VaDominikKienzler]

+1

[mrdomino]

I'm also encountering this issue. I'm building an app that does in-browser inference on a 300mb vision transformer, and the model is being re-downloaded with every request, which makes development from a vps particularly painful.

I'm indifferent towards this issue for production servers - it seems like there are other ways of configuring asset caching there - but for dev, it'd really help me to cache files in public/.

[gegyhamdani]

Is there any workaround for how to cache an asset in a public folder?

I'm using next 13.5.5, and the app loads an asset (it's a Unity build), on a specific page with a 600mb on a single Unity build file, and is being re-downloaded when the page is revisited.
The problem is that the asset (Unity) load takes too long for the user to be rendered, while the assets rarely change.

[Jared-Dahlke]

haha this is joke, right? no ability to cache public assets?

[yanal97]

Has there been any updates on this? I really do not understand the logic behind having the cache max-age as 0 for public static assets.

[SanderRuusmaa]

Surely an option should at least be provided to opt in and set a custom cache time for the public assets (combining it with stale-while-revalidate header for the optimal result). There are perfectly reasonable use-cases where the asset should not be freshly served from the Next.js server on each page view/request.

In our case, the icons take 100-300ms to load in and cause absolutely unnecessary white-space until they load in...

[SarahShkb]

I'm having the same issue, hope there would be a solution soon! thanks

[MDmubarak786]

Am also having the same issue. Anyone have workaround for this?

[nicolopadovan]

From Vercel's documentation

Static Files Caching
Static files are automatically cached at the edge after the first request and are cached for up to 31 days on Vercel's Edge Network.
If a static file is unchanged, the cached value can persist across deployments due to the hash used in the filename
Optimized images cached will persist between deployments
The default Cache-Control header contains public, max-age=0, must-revalidate to prevent clients (e.g. browsers) from caching the file locally
Browser
max-age=N, public
max-age=N, immutable
Where N is the number of seconds the response should be cached. The response must also meet the caching criteria.

This ensures that the Caching happens on Vercel's Edge Network (which may be seen in this case as a CDN) and not on the browser.

However it would be great if we could customise this behavior further for those files that do not change at all (and could be cached on the browser)

[DWMiller]

@nicolopadovan https://nextjs.org/docs/app/building-your-application/optimizing/static-assets specifically says it doesn't.

Bit of a terminology issue but I believe the link on "static files" does specifically mean files as opposed to the public folder assets.

[davidwhthomas]

I use Nginx as a proxy in front of Next.js and this approach works to update the cache-control response header for static files

As a simple example, in the nginx server config:

# Override Cache-Control for static image files, including those with optional query parameters
location ~* \.(jpg|jpeg|png|gif|ico|svg|webp)(\?.*)?$ {
    # Proxy through to Next.js
    proxy_pass http://localhost:3000;

    # Clear any existing Cache-Control header from Next.js
    proxy_hide_header Cache-Control;

    # Set new Cache-Control response header
    add_header Cache-Control "public, max-age=31536000, immutable" always;
}

[allakov]

Looks like your answer is the only way (if we don't use vercel/etc), cause from the next.js docs:

Next.js cannot safely cache assets in the public folder because they may change. The default caching headers applied are:
Cache-Control: public, max-age=0

[cupofjoakim]

This is so silly. Surely there should be a designed way to set cache control on static headers if you're just running vanilla nextjs without cf or vercel?

[yanal97]

Custom Solution

I decided to host my static files on an external blob storage (like S3), configure it behind a CDN (such as CloudFront), and set up custom caching rules there. Although the initial setup was somewhat frustrating, this approach allows for modifications—such as updating images, localization files, and configuration data—without the need to redeploy the entire application. While this setup makes sense for large projects like mine, it might be an unnecessary extra cost & effort for smaller applications.

[asedii]

I tested this with Next.js 15.3.2, and it seems you can override the cache headers for files in the public folder, so this issue may no longer be valid.

If you’re referencing the assets in your code and you want to have Cache-Control: public, max-age=31536000, immutable, it’s better to use the _next/static directory.

[CodyAdam]

Could you share how to do that ? I am also running Next.js 15

[ivocreates]

See my answer, it might be of help.

[asedii]

Could you share how to do that? I am also running Next.js 15

Here is the next.config.ts that I used:

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  async headers() {
    return [
      {
        source: '/images/:slug*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
    ];
  },
};

export default nextConfig;

I've tested this locally, and the cache header is applied.

[jgcjordi]

Could you share how to do that? I am also running Next.js 15

Here is the next.config.ts that I used:

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  async headers() {
    return [
      {
        source: '/images/:slug*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
    ];
  },
};

export default nextConfig;

I've tested this locally, and the cache header is applied.

I tried this and not works for me with the current last version. 15.5.0

[ivocreates]

This is a known limitation in Next.js. The next.config.js headers don't apply to files in the public/ folder because those are served by the static file handler, not the custom header system.

Solutions:

1. Use a _headers file if you're on platforms like Vercel or Cloudflare Pages. Example:

   /fonts/*
     Cache-Control: public, max-age=31536000, immutable
   

2. For Vercel, use vercel.json:

   {
     "headers": [
       {
         "source": "/fonts/(.*)",
         "headers": [
           {
             "key": "Cache-Control",
             "value": "public, max-age=31536000, immutable"
           }
         ]
       }
     ]
   }

3. If you run a custom Node.js server, use express.static with cache settings:

   app.use('/fonts', express.static('public/fonts', {
     maxAge: '1y',
     immutable: true
   }));

To summarize: cache control for public/ assets must be handled outside of next.config.js, either via CDN/platform config or a custom server.