Next.js为何给静态JS文件加?ts参数？缓存配置咨询

1. 为何添加该参数？ #

这个ts时间戳参数是开发模式下的专属行为——Next.js在开发时会频繁热更新代码，加这个参数是为了强制浏览器跳过缓存，每次请求都拉取最新的文件，避免开发者修改代码后，浏览器还加载旧缓存的内容，影响开发效率。而生产构建后的静态文件不会带这个参数，Next.js会用基于文件内容的哈希值来命名文件（比如_app.[abc123].js），靠文件名本身实现缓存失效。

2. 若为避免构建后使用旧代码，为何不用构建版本而非时间戳？ #

首先，开发模式下并没有固定的“构建版本”——开发服务器是实时编译的，代码随时在变，时间戳是最简单的动态标识，每次启动或热更新时生成新的时间戳，确保请求参数唯一，直接绕过缓存。

而生产环境里，Next.js根本不会用时间戳，而是用内容哈希来命名文件：只要文件内容不变，哈希值就不变，浏览器会一直缓存该文件；一旦代码修改，哈希值跟着变，文件名就变了，浏览器会自动请求新文件，比手动维护构建版本号更精准，还能避免版本号冲突或遗漏更新的问题。

3. 是否有静态JS文件缓存的配置选项？ #

当然有，分两种场景配置：

• 开发模式：不建议修改缓存策略，否则会导致代码修改后看不到最新效果。如果一定要调整，可以在next.config.js里通过devServer.headers设置缓存头，比如：

module.exports = {
  devServer: {
    headers: {
      'Cache-Control': 'public, max-age=3600',
    },
  },
};

• 生产模式：Next.js默认已经给静态资源设置了最优缓存策略（Cache-Control: public, max-age=31536000, immutable），因为文件名带内容哈希，只要文件内容不变，浏览器会长期缓存。如果需要自定义缓存规则，同样在next.config.js里用headers配置：

module.exports = {
  async headers() {
    return [
      {
        source: '/_next/static/(.*)',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=86400, immutable',
          },
        ],
      },
    ];
  },
};

生产模式下不会出现ts参数，完全靠文件名哈希来控制缓存，既能复用未修改的文件缓存，又能在代码更新时自动触发缓存失效。

内容的提问来源于stack exchange，提问作者Dimitroff