Next.js 13.4.13（App Router）数据重新验证突然失效求助

以下是针对你遇到的问题的具体排查方向和解决方案：

1. 检查Sanity Client的fetch参数传递是否正确 #

你当前通过client.fetch传递next: {revalidate: 60}的方式可能存在问题。@sanity/client的fetch方法签名为：

fetch(query: string, params?: QueryParams, options?: FetchOptions)

next是Next.js原生fetch的专属选项，需要传递给底层的fetch请求，而非作为Sanity查询的参数。直接将next混入params对象，Sanity Client会将其视为查询参数的一部分，不会传递给Next.js的缓存机制。

修复方案：
修改fetchContent函数，使用Sanity Client的第三个参数传递fetch选项，或者改用原生fetch调用Sanity API：

// 方案1：通过Sanity Client的第三个参数传递next选项
export default async function fetchContent(query, options) {
  const res = await client.fetch(
    query,
    options, // 单独传递查询参数
    { next: { revalidate: 60 } } // 作为fetch选项传递
  )
  return res
}

// 方案2：改用原生fetch调用Sanity API（兼容性更稳定）
export default async function fetchContent(query, options) {
  const res = await fetch(`https://${process.env.NEXT_PUBLIC_SANITY_PROJECT_ID}.api.sanity.io/v2023-05-03/data/query/${process.env.NEXT_PUBLIC_SANITY_DATASET}`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${process.env.SANITY_API_TOKEN}`
    },
    body: JSON.stringify({ query, params: options }),
    next: { revalidate: 60 }
  })
  return res.json()
}

2. 修复页面组件的逻辑错误 #

你的页面组件中有一处明显的变量错误：

if (!tool) {
  notFound()
}

这里的tool未定义，实际应该判断!page。这个错误会导致页面直接触发notFound()，干扰Next.js的缓存重验证逻辑（比如页面未正常渲染，缓存未被正确更新）。

修复方案：
将判断条件修正为：

if (!page) {
  notFound()
}

3. 检查Sanity API响应的缓存头 #

Sanity API默认会返回Cache-Control响应头（比如s-maxage=604800，即7天），如果这个头的优先级高于Next.js的revalidate设置，会导致CDN或浏览器缓存数据，忽略Next.js的重验证时间。

排查与修复：

• 打开浏览器开发者工具，查看Sanity API请求的响应头，确认Cache-Control的值。
• 如果存在过长的s-maxage，通过Sanity Client的headers选项覆盖：

export default async function fetchContent(query, options) {
  const res = await client.fetch(
    query,
    options,
    {
      next: { revalidate: 60 },
      headers: {
        'Cache-Control': 's-maxage=60, stale-while-revalidate'
      }
    }
  )
  return res
}

4. 检查Next.js的全局缓存配置 #

如果next.config.js中设置了全局revalidate配置，会覆盖页面级的重验证设置。

排查步骤：

• 打开next.config.js，检查是否有类似配置：

module.exports = {
  revalidate: 86400, // 全局重验证时间，会覆盖页面级设置
}

• 如果存在全局revalidate，移除它或调整为你需要的时间。

5. 检查部署环境的缓存设置 #

若使用Vercel等平台部署，边缘缓存（Edge Cache）可能会忽略Next.js的revalidate设置。

排查步骤：

• 登录部署平台，检查项目的缓存规则，确认没有自定义策略覆盖页面的重验证时间。
• 手动清除部署平台的缓存，测试是否能获取最新数据。

6. 检查版本兼容性 #

最近如果升级了Next.js或Sanity Client的版本，可能出现缓存逻辑不兼容的情况。

排查步骤：

• 查看package.json中的next和@sanity/client版本，对比官方文档确认兼容性。
• 尝试回退到之前正常工作的版本，验证问题是否消失。

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