如何解决Sanity Studio更新无法同步到Next.js应用的问题？

排查方向及解决方案 #

1. 检查Next.js数据获取的缓存策略 #

• 如果使用getStaticProps生成静态页面，默认仅在构建时获取一次数据。需开启增量静态再生（ISR），在getStaticProps中添加revalidate参数实现定时刷新：

  export async function getStaticProps() {
    const data = await fetchSanityData();
    return {
      props: { data },
      revalidate: 60 // 每60秒重新生成页面
    };
  }
  

• 若需实时同步Sanity内容变更，可配置Sanity Webhook触发Next.js按需重新生成：在Sanity Studio的Webhook设置中，添加指向Next.js应用/api/revalidate接口的请求，在接口内调用res.revalidate()方法刷新指定页面。

2. 验证Sanity API调用正确性 #

• 确认Sanity客户端配置的projectId、dataset和apiVersion完全正确，建议使用日期格式的API版本（如apiVersion: "2023-10-01"）避免兼容性问题。
• 检查查询语句是否过滤了草稿文档，确保只获取已发布内容：

  *[_type == "post" && !(_id in path("drafts.**"))]
  

• 直接通过Sanity API端点查询数据（如https://<project-id>.api.sanity.io/v2023-10-01/data/query/<dataset>?query=*[_type == "post"]），确认返回的是最新内容，排除Sanity端的数据问题。

3. 清理Next.js缓存 #

• 开发模式下：重启Next.js开发服务器，或使用浏览器强制刷新（Ctrl+Shift+R）清除本地缓存。
• 生产模式下：若部署在Vercel等平台，检查平台的缓存策略，或手动触发重新部署；若自定义部署，需清理服务器端的静态文件缓存。

4. 确认Sanity文档发布状态 #

• 在Sanity Studio中检查目标文档是否已完成发布操作（而非仅保存草稿），部分情况下可能因操作失误导致内容停留在草稿状态。

5. 客户端数据获取优化 #

• 若使用useSWR或React Query在客户端获取数据：
  • 开启revalidateOnFocus和revalidateOnReconnect选项，确保页面聚焦或重新连接时自动刷新数据；
  • 添加手动刷新按钮，调用mutate()（SWR）或refetch()（React Query）方法主动更新数据。

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