如何在Next.js中为静态文件设置版本号而非时间戳？

完全可以实现，Next.js允许通过配置修改静态资源的缓存标识策略，下面是两种可行的方案：

方案1：固定自定义版本号（全局统一） #

直接在next.config.js中配置，把默认的时间戳替换成你指定的版本号：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 用自定义版本号替换Next.js默认生成的随机buildId
  generateBuildId: () => '1.1.1',
  
  webpack: (config, { isServer }) => {
    const VERSION = '1.1.1';

    // 仅处理客户端静态资源
    if (!isServer) {
      // 修改JS chunk的输出路径，添加版本查询参数
      config.output.chunkFilename = `static/chunks/[name].js?v=${VERSION}`;
      config.output.filename = `static/chunks/[name].js?v=${VERSION}`;

      // 修改CSS文件的输出路径，添加版本查询参数
      config.module.rules.forEach(rule => {
        if (rule.oneOf) {
          rule.oneOf.forEach(oneOfRule => {
            if (oneOfRule.type === 'asset/resource' && oneOfRule.generator?.filename?.includes('static/css')) {
              oneOfRule.generator.filename = `static/css/[name].css?v=${VERSION}`;
            }
          });
        }
      });
    }

    return config;
  },
};

module.exports = nextConfig;

配置后，生产构建（next build）生成的静态资源引用就会变成/_next/static/chunks/polyfills.js?v=1.1.1这类格式，替代原来的时间戳参数。

方案2：环境变量动态指定版本号 #

如果需要每次构建时灵活切换版本号，可以通过环境变量传递：

1. 先修改package.json的构建脚本，添加版本参数：

"scripts": {
  "build": "VERSION=1.1.1 next build",
  "build:beta": "VERSION=1.1.2-beta next build"
}

2. 然后在next.config.js中读取环境变量：

/** @type {import('next').NextConfig} */
const VERSION = process.env.VERSION || '1.0.0';

const nextConfig = {
  generateBuildId: () => VERSION,
  
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.output.chunkFilename = `static/chunks/[name].js?v=${VERSION}`;
      config.output.filename = `static/chunks/[name].js?v=${VERSION}`;

      // 处理CSS文件同理
      config.module.rules.forEach(rule => {
        if (rule.oneOf) {
          rule.oneOf.forEach(oneOfRule => {
            if (oneOfRule.type === 'asset/resource' && oneOfRule.generator?.filename?.includes('static/css')) {
              oneOfRule.generator.filename = `static/css/[name].css?v=${VERSION}`;
            }
          });
        }
      });
    }

    return config;
  },
};

module.exports = nextConfig;

注意事项 #

• 开发环境下Next.js会启用热重载，部分配置可能不生效，建议在生产构建后验证效果。
• 若需要兼顾内容哈希（避免相同内容重复缓存），可以把版本号和内容哈希结合，比如写成static/chunks/[name].js?v=${VERSION}-[contenthash]。
• 对于静态图片资源，同样可以在webpack的asset/resource规则中修改输出路径，添加版本查询参数。

内容的提问来源于stack exchange，提问作者Berkay Gülyaz