next-sanity
在Next.js应用中无缝集成Sanity无头CMS的官方工具包
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：next-sanity。 它的用途是：在Next.js应用中无缝集成Sanity无头CMS的官方工具包 完整的 Skill 内容见：https://321skill.com/skills/next-sanity/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'帮我在Next.js项目里用next-sanity设置一个博客文章列表页，需要支持静态生成和实时预览。'，它会引导你安装包、配置环境变量、使用`createClient`创建客户端，并编写一个使用`useLiveQuery`获取文章列表的页面组件，同时解释如何设置预览路由。
介绍
next-sanity 是一个官方维护的Next.js集成工具包，旨在解决在Next.js框架中高效、安全地使用Sanity无头CMS的难题。它提供了一系列React Hooks、API路由工具和CLI命令，帮助开发者轻松查询、预览和更新Sanity内容。
开发者可以通过安装该包，使用其提供的useQuery、useLiveQuery等React Hooks在组件中直接获取实时数据，或利用其CLI快速生成Sanity配置文件和API路由，实现服务端渲染(SSR)、静态生成(SSG)和实时预览功能。
它非常适合正在或计划使用Next.js作为前端框架，并选择Sanity作为内容管理系统的全栈开发者或前端团队。无论是构建博客、营销网站还是复杂的企业级应用，都能从中受益。
使用建议包括：在Next.js 13+的App Router中充分利用其服务端组件支持以获得最佳性能；注意在生产环境中妥善管理API令牌，避免在客户端组件中暴露敏感信息；对于需要实时更新的内容，优先考虑使用useLiveQuery以提升用户体验。
核心特点
作为Vercel与Sanity官方联合开发的工具，它深度集成了Next.js的最新特性（如App Router、Server Components），并提供了开箱即用的实时内容预览和增量静态再生成(ISR)支持，这是许多第三方集成库所不具备的。
注意事项
此Skill仅适用于Next.js项目，且主要针对Sanity CMS，不适用于其他CMS或前端框架。
常见问题
next-sanity支持Next.js的App Router吗？
是的，它完全支持Next.js 13+的App Router，并提供了相应的服务端组件工具。
如何实现Sanity内容的实时预览？
使用`useLiveQuery` Hook或在API路由中配置预览模式，即可实现内容的实时更新。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/next-sanity/raw/index.md 读取 next-sanity 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/next-sanity/raw/index.md（查看排版版本）