如何基于用户切换Next.js页面生成模式以支持CRM预览？

完全可以实现你的需求，Next.js内置的预览模式机制就能完美匹配你的场景，下面是具体实现步骤和替代方案：

一、核心实现步骤 #

1. 配置预览模式开启接口 #

创建一个API路由（比如pages/api/preview.js），用来接收CRM的预览触发请求，设置预览会话Cookie并跳转目标页面：

export default async function handler(req, res) {
  // 验证请求合法性（用CRM传递的密钥，防止恶意调用）
  const { secret, slug } = req.query;
  if (secret !== process.env.PREVIEW_SECRET || !slug) {
    return res.status(401).json({ message: '无效请求' });
  }

  // 拉取CRM的未发布预览数据
  const post = await fetch(`https://your-crm-api.com/preview/post/${slug}`).then(res => res.json());
  if (!post) {
    return res.status(404).json({ message: '内容不存在' });
  }

  // 开启Next.js预览模式，自动设置标识Cookie
  res.setPreviewData({});
  // 跳转到对应内容页面
  res.redirect(`/posts/${slug}`);
}

setPreviewData会自动生成__prerender_bypass和__next_preview_data两个Cookie，用来标识当前处于预览模式。

2. 在页面组件中切换数据来源 #

不管是SSG页面（用getStaticProps）还是SSR页面，都可以通过context.preview判断模式，切换数据拉取逻辑：

export async function getStaticProps(context) {
  // 处于预览模式时，拉取未发布数据
  if (context.preview) {
    const data = await fetch(`https://your-crm-api.com/preview/post/${context.params.slug}`).then(res => res.json());
    return {
      props: { post: data },
      revalidate: 0 // 预览模式下禁用缓存，实时拉取数据
    };
  }

  // 正常SSG模式，拉取已发布数据
  const data = await fetch(`https://your-crm-api.com/post/${context.params.slug}`).then(res => res.json());
  return {
    props: { post: data },
    revalidate: 86400 // 可选：增量静态再生，按需更新静态页面
  };
}

如果需要完全实时SSR，也可以改用getServerSideProps，同样通过context.preview判断模式。

3. 配置预览退出接口（可选） #

创建pages/api/exit-preview.js，让创作者可以主动退出预览模式：

export default function handler(req, res) {
  // 清除预览标识Cookie
  res.clearPreviewData();
  // 跳转到指定页面或首页
  res.redirect(req.query.redirect || '/');
}

在页面中添加退出按钮，调用这个接口即可回到正常静态页面模式。

4. 对接CRM预览功能 #

在CRM的预览触发按钮中，配置跳转链接为你的Next.js预览接口，示例：
https://your-nextjs-site.com/api/preview?secret=YOUR_PREVIEW_SECRET&slug=POST_SLUG
确保CRM传递正确的密钥和内容标识，创作者点击预览就能直接进入Next.js预览模式。

二、其他可行方案 #

如果不想依赖Next.js内置预览模式，也可以考虑以下方式：

• 自定义Cookie标识：自己设置一个自定义Cookie（比如preview_mode=true），在页面的getStaticProps或getServerSideProps中读取Cookie判断模式，切换数据来源。这种方式更灵活，但需要自己处理Cookie的安全验证。
• 独立预览环境：搭建一个和生产环境一致的独立预览环境，创作者在该环境中查看未发布内容，确认后再发布到生产环境。这种方式隔离性更强，但需要额外的服务器资源和部署流程。

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