Next.js 与 Sanity 实时预览功能失效问题求助

• 检查预览模式初始化逻辑
  Pages Router 要确保getStaticProps里正确判断预览状态，并且使用预览客户端拉取数据；App Router 要在路由处理中正确调用draftMode().enable()，且页面组件能读取到预览状态。
  示例（Pages Router）：

  export async function getStaticProps(context) {
    const isPreview = context.preview || false;
    // 预览模式下必须关闭CDN，避免缓存
    const client = isPreview 
      ? sanityClient.withConfig({ useCdn: false }) 
      : sanityClient;
    const pageData = await client.fetch(YOUR_QUERY);
  
    return {
      props: { pageData, isPreview },
      revalidate: 60, // 按需调整，预览模式下可设为0
    };
  }
  

• 验证Sanity客户端权限与配置
  预览模式下必须使用带草稿读取权限的token，且客户端配置中useCdn必须设为false——CDN会缓存已发布内容，无法获取实时草稿更新。同时确认环境变量中的SANITY_API_TOKEN配置正确，且token拥有viewer及以上权限。

• App Router 路由与布局检查
  若使用App Router，要确保预览状态能在路由层级中正确传递。比如在页面组件中直接判断：

  import { draftMode } from 'next/headers';
  import { sanityClient } from '@/lib/sanity';
  
  export default async function Page({ params }) {
    const { isEnabled } = draftMode();
    const client = isEnabled 
      ? sanityClient.withConfig({ useCdn: false }) 
      : sanityClient;
    const pageData = await client.fetch(YOUR_QUERY, params);
  
    return <div>{/* 页面内容 */}</div>;
  }
  

  注意：路由组不会影响预览状态传递，但需确保所有涉及数据拉取的组件都能读取到draftMode状态。

• 排查Next.js缓存配置
  检查next.config.js是否存在禁用增量静态再生的配置（比如output: 'export'），这类配置会导致预览模式失效。确保revalidate参数设置合理，预览场景下可临时设为0以禁用缓存。

• Sanity Studio 预览URL配置
  确认Studio中预览插件的URL配置正确，需携带preview=true参数（或对应预览模式触发参数）。示例：

  import { preview } from '@sanity/preview-kit';
  
  export default defineConfig({
    plugins: [
      preview({
        url: {
          preview: (doc) => `http://localhost:3000/${doc.slug.current}?preview=true`,
        },
      }),
    ],
  });
  

  打开Studio预览时，检查浏览器地址栏是否包含正确参数，是否能正常触发Next.js的预览模式。

• 浏览器端排查
  打开浏览器DevTools，检查网络请求是否有错误（比如Sanity API返回401/403，说明token权限不足）；勾选“Disable cache”后再测试预览，排除浏览器缓存导致的内容不更新问题。

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