如何用Next.js构建带缓存失效的静态私密SPA应用？

1. 配置静态导出模式 #

首先在next.config.js中启用静态导出配置，确保构建产物为纯静态资源，无需Node.js运行时：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  // 可选：若需统一路由后缀为.html，可开启此项
  // trailingSlash: true,
};

module.exports = nextConfig;

2. 自定义Build ID实现资源自动失效 #

Next.js默认会生成Build ID，我们可以自定义生成规则（随机字符串、Git提交哈希等），确保每次构建生成唯一标识，让静态资源路径随Build ID变化：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  generateBuildId: async () => {
    // 方案1：生成随机字符串作为Build ID
    return Math.random().toString(36).slice(2, 18);
    // 方案2：使用Git提交哈希（需确保构建环境安装Git）
    // return require('child_process').execSync('git rev-parse HEAD').toString().trim();
  },
};

module.exports = nextConfig;

构建完成后，所有JS/CSS等静态资源会被放在_out/_next/static/[Build ID]/目录下，HTML文件中的资源引用路径会自动更新为该路径，实现新构建后旧缓存资源自动失效。

3. 配置服务器缓存规则 #

为确保HTML文件不被缓存（让用户每次请求都获取最新的资源引用），同时让JS/CSS等静态资源长期缓存，需要在静态服务器中设置缓存头：

Nginx配置示例

server {
  # 其他基础配置...

  # HTML文件禁用缓存
  location ~* \.html$ {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    expires 0;
  }

  # 静态资源长期缓存（有效期1年）
  location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
    add_header Cache-Control "public, max-age=31536000, immutable";
    expires 1y;
  }
}

Apache（.htaccess）配置示例

# 禁用HTML文件缓存
<FilesMatch "\.(html)$">
  Header set Cache-Control "no-cache, no-store, must-revalidate"
  Header set Expires "0"
</FilesMatch>

# 静态资源长期缓存
<FilesMatch "\.(js|css|png|jpg|jpeg|gif|ico|svg)$">
  Header set Cache-Control "public, max-age=31536000, immutable"
  Header set Expires "access plus 1 year"
</FilesMatch>

4. 验证效果 #

1. 执行npm run build完成构建，查看_out/_next/static/目录，会发现以自定义Build ID命名的文件夹；
2. 打开任意HTML文件，检查<script>或<link>标签的资源路径，确认包含该Build ID；
3. 部署后，新构建的HTML会引用新路径的静态资源，用户浏览器会自动加载新资源，旧缓存的JS文件因路径不匹配不会被使用。

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