Next.js 13 + Contentful预览异常：预览返回已发布内容无更新

这些配置大概率没做对： #

• 预览客户端的核心参数是否正确
  你的previewClient必须用Contentful的预览API密钥（不是生产密钥），并且指定预览域名preview.contentful.com，还要开启preview: true。代码示例：

  const previewClient = createClient({
    space: process.env.CONTENTFUL_SPACE_ID,
    accessToken: process.env.CONTENTFUL_PREVIEW_ACCESS_TOKEN, // 必须是预览密钥
    host: 'preview.contentful.com', // 别用默认的生产域名
    preview: true,
  });
  

  另外检查getPreviewResortDetailsBySlug的查询逻辑，别加了sys.publishedAt这类过滤草稿的条件——预览API本来就会返回未发布的草稿条目。

• Draft Mode真的激活了吗？
  在页面里加个日志，打印draftMode.isEnabled的值，确认预览路由api/preview是否成功开启Draft Mode：

  import { draftMode } from 'next/headers';
  export default async function ResortPage() {
    const { isEnabled } = draftMode();
    console.log('Draft Mode状态:', isEnabled); // 看控制台是否为true
    // ...
  }
  

  如果是false，说明api/preview路由的验证逻辑有问题，比如没正确调用draftMode().enable()，或者Contentful传过来的secret参数和你代码里校验的不一致。

• Contentful后台的预览URL配置错误
  去Contentful后台「设置 > 预览」里，确认预览URL指向你的api/preview路由，而且要带对参数：比如https://你的域名.com/api/preview?secret=你的预览密钥&slug=帖子slug，参数里的secret必须和你api/preview里校验的完全一致。

• App Router的适配问题（如果用的是App Router）
  要是你用的是Next.js 13的App Router，别再用Pages Router的_app.js包裹ContentfulLivePreviewProvider了，得在layout.js里包裹整个应用。而且实时更新的组件必须是客户端组件（加'use client'指令），因为useContentfulLiveUpdates是客户端钩子，服务器组件用不了。

• 实时更新的组件没设成客户端组件
  useContentfulLiveUpdates只能在客户端组件里用，所以用这个钩子的组件开头必须加'use client'，不然根本触发不了实时更新，自然看不到修改后的内容。

内容的提问来源于stack exchange，提问作者Agustin G.