Next.js中使用getStaticProps时如何在内容变更后按需刷新静态页面

这个特性完全匹配你的需求：仅在主动触发时重建指定静态页面，没有多余的周期性重验证请求，也不需要走服务端渲染，静态页面的性能优势可以完全保留。

实现步骤 #

1. 给Next.js项目新增重验证接口 #

在pages/api目录下新建revalidate.js文件，代码示例如下：

export default async function handler(req, res) {
  // 优先做权限校验，避免接口被恶意调用，校验请求携带的密钥是否和预设值一致
  if (req.headers.authorization !== `Bearer ${process.env.REVALIDATE_SECRET}`) {
    return res.status(401).json({ message: '权限校验失败' })
  }
  // 从请求参数中获取要重验证的页面路径，例如 /article/123
  const { path } = req.body
  try {
    // 调用Next.js内置的重验证方法
    await res.revalidate(path)
    return res.json({ revalidated: true })
  } catch (err) {
    // 页面不存在等异常场景返回错误
    return res.status(500).send('重验证失败')
  }
}

记得在项目环境变量中新增REVALIDATE_SECRET，设置复杂度较高的自定义密钥，避免泄露。

2. 在管理后台新增触发按钮 #

管理员修改完内容提交后，点击按钮即可向刚才的/api/revalidate接口发起请求，请求参数携带更新内容对应的页面路径即可，示例请求逻辑：

// 管理后台的触发请求代码
async function triggerRevalidate(path) {
  await fetch('你的Next.js站点域名/api/revalidate', {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer 你预设的REVALIDATE_SECRET值',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ path: path })
  })
  alert('页面内容已更新')
}

注意事项 #

• 如果你使用的是Next.js App Router模式，对应的重验证API是revalidatePath，整体逻辑和上述实现一致，仅需要调整接口内调用的方法
• 每次触发重验证后，Next.js会在后台重新从数据库拉取最新数据生成静态页面，生成完成后新用户访问就会拿到更新后的内容，不会影响正在访问的用户体验
• 不需要搭配定时revalidate参数，完全按需触发，没有多余的重验证请求，性能和纯静态站点完全一致

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