I am using the default nextjs server to run my nextjs program by this command next start.
However, I am not able to change the cache-control header for the files under the public folder.
Is there any method to set the cache-control header without setting the Custom Server?
There is undocumented feature or bug, but it works. More info can be found here https://nextjs.org/docs/api-reference/next.config.js/headers
Add config to you next.config.js file for example:
async headers() {
return [
{
source: '/:all*(svg|jpg|png)',
locale: false,
headers: [
{
key: 'Cache-Control',
value: 'public, max-age=9999999999, must-revalidate',
}
],
},
]
},
Cache-Control. nextjs.org/docs/api-reference/next.config.js/…
Per this bug report and discussion the Next devs believe static file serving should only be used as a developer convenience, not in production, and hence they don't consider it a priority to add such features.
However, in the issue comments somebody has suggested a workaround using Express to detect requests that will end up serving static files. For example, if the Next.js route handler is the handler() method you can do this to set a one-year cache policy for *.woff font files:
// this is a hack to make the cache headers friendlier..
server.get('*.woff2?', (req, res) => {
res.setHeader('Cache-Control', 'public,max-age=31536000');
return handler(req, res);
});
According to the NEXT. official documentation i.e.,
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.
If you only want to set the max-age and only for images, you can use minimumCacheTTL in next.config.js, like so:
module.exports = {
images: {
minimumCacheTTL: 31536000,
},
}
Note that
There is no mechanism to invalidate the cache at this time, so its best to keep
minimumCacheTTL low. Otherwise you may need to manually change thesrcprop or delete<distDir>/cache/images.
This won't work if you're using Static Image Imports, because for those the filename includes a hash, so the server uses the immutable directive.
I'm using Express as a custom server for Next.js, and this is how I set "Cache-Control" header for static files:
const express = require("express");
const server = express();
...
server.use(express.static(__dirname + "/public", { maxAge: "365d" }));
server.use(function (req, res, next) {
if (req.url.match(".js|.css|.woff|.jpg|.png|.gif|.ttf")) {
res.setHeader("Cache-Control", "public,max-age=31536000"); // 365 days
}
next();
});
