新增博客未同步至Vercel部署的NextJS项目问题排查

问题背景 #

用Next.js渲染Sanity上的博客内容，初始1篇博客时线上（Vercel部署）正常显示，但在Sanity新增博客后，线上项目未同步更新，本地运行却正常。已尝试过基于时间的缓存重新验证、移除Ajax缓存、设置export const dynamic = 'force-dynamic'，以及使用yarn build/next export部署，均未解决。

针对性解决步骤 #

1. 配置Sanity→Vercel自动构建触发

线上静态构建产物不会自动感知Sanity内容变化，必须触发重新构建才能更新：

• 在Vercel项目的「Settings」→「Git」→「Deploy Hooks」生成一个部署触发URL。
• 登录Sanity管理后台，进入「Settings」→「API」→「Webhooks」，添加新Webhook：
  • 填入刚才生成的Vercel URL
  • 设置触发条件为「文档创建、更新、删除」
  • 保存后，后续Sanity内容变更会自动触发Vercel重新构建，更新线上内容。

2. 放弃next export，改用Vercel默认部署模式

next export会生成纯静态HTML文件，完全不支持增量静态再生（ISR）和动态重新验证，一旦构建完成就无法更新内容。直接用yarn build走Vercel默认部署流程，才能启用Next.js的动态内容更新能力。

3. 正确配置增量静态再生（ISR）

如果使用App Router，在博客列表/详情的路由文件里配置ISR：

// app/blog/page.js
import { getBlogPosts } from '@/lib/sanity';

// 每60秒自动重新验证内容（可按需调整时间）
export const revalidate = 60;

// 预生成所有博客详情页的静态路径
export async function generateStaticParams() {
  const posts = await getBlogPosts();
  return posts.map(post => ({ slug: post.slug.current }));
}

export default async function BlogPage() {
  const posts = await getBlogPosts();
  return (
    <div>
      {/* 渲染博客列表逻辑 */}
    </div>
  );
}

4. 配置按需重新验证（精准触发更新）

配合Sanity Webhook，在内容变更时精准重新验证对应页面：

• 创建API路由app/api/revalidate/route.js：

import { revalidatePath } from 'next/cache';
import { NextResponse } from 'next/server';

export async function POST(request) {
  // 可选：添加Sanity Webhook签名验证，防止非法请求
  const { slug } = await request.json();

  // 重新验证博客列表页
  revalidatePath('/blog');
  // 如果是单篇博客更新，验证对应详情页
  if (slug) revalidatePath(`/blog/${slug}`);

  return NextResponse.json({ revalidated: true });
}

• 把这个API的线上地址配置到Sanity的Webhook中，内容变更时会触发该接口，主动更新对应页面的缓存。

5. 手动清除Vercel边缘缓存

如果上述配置后仍有旧内容残留，可手动清除Vercel缓存：

• 进入Vercel项目的「Deployments」页面
• 找到最新的部署记录，点击「More」→「Purge Cache」
• 清除后刷新线上页面即可看到最新内容。

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