为 nextjs 默认服务器上的静态文件服务设置缓存控制标头

Question

我正在使用默认的 nextjs 服务器通过此命令运行我的 nextjs 程序next start。

但是，我无法更改公共文件夹下文件的缓存控制标头。

有没有什么方法可以在不设置自定义服务器的情况下设置缓存控制标头？

Answer 1

有未记录的功能或错误，但它有效。更多信息可以在这里找到https://nextjs.org/docs/api-reference/next.config.js/headers

将配置添加到您的next.config.js文件中，例如：

  async headers() {
    return [
      {
        source: '/:all*(svg|jpg|png)',
        locale: false,
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=9999999999, must-revalidate',
          }
        ],
      },
    ]
  },

Answer 2

根据此错误报告和讨论，Next 开发人员认为静态文件服务应仅用作开发人员的便利，而不应用于生产，因此他们不认为添加此类功能是优先事项。

但是，在问题评论中，有人建议使用 Express 来检测最终将提供静态文件的请求的解决方法。例如，如果 Next.js 路由处理程序是handler()您可以执行此操作为 *.woff 字体文件设置一年缓存策略的方法：

  // 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);
  });