用途:把 next-sanity 接入启用 cacheComponents: true 的 Next.js 16+ 应用,让 Sanity 内容可静态预渲染,同时通过 <SanityLive> 在内容变更时按需重新验证。
主要能力:用 sanityFetch 经单一共享的 'use cache' 边界 cachedSanity 获取数据;<SanityLive> 在根布局通过 EventSource 连接 Sanity Content Lake 触发重新验证;草稿模式下支持 Visual Editing 与 Presentation Tool。提供 cachedSanity、sanityFetch、cachedSanityMetadata、cachedSanityStaticParams、getDynamicFetchOptions 等辅助函数。
使用方式:安装 npm install next-sanity@^13 --save-exact;在 next.config.ts 启用 cacheComponents 并将 cacheLife.default 设为 sanity;创建 client.ts 与 live.ts,用 defineLive 导出 SanityLive 与 sanityFetch,并定义 cachedSanity;在根布局渲染一次 <SanityLive>(strict 模式需传 includeDrafts)与 <VisualEditing>;页面采用三层模式(draftMode 分支 → Suspense 内动态层 → cachedSanity 缓存层)。
适用场景:Next.js 16.3+ 与 next-sanity v13 的 Sanity 站点,需要静态预渲染加实时内容更新。
限制:需设置 NEXT_PUBLIC_SANITY_PROJECT_ID、NEXT_PUBLIC_SANITY_DATASET、SANITY_API_READ_TOKEN;顶层 Page/Layout 不可加 'use cache';<SanityLive> 与 <VisualEditing> 全树只能各渲染一次;嵌入 Studio 时需用路由组隔离。具体价格与效果暂未提供。