Sanity 集成
本文介绍如何将 Sanity 作为 Headless CMS，配合 Next.js 框架构建高性能网站。通过 EdgeOne Pages 的一键部署能力，您可以快速完成 Sanity 和 Next.js 的集成，同时获得全球CDN加速，实现网站的最佳性能和用户体验。
快速入门
本文的集成介绍主要包含以下三个步骤：配置 Sanity 作为数据源、使用 Next.js 生成页面、部署到 EdgeOne Pages。如果您想了解这个方案的具体实现原理，或者需要根据自身需求进行定制化开发，可以继续阅读下面的详细配置步骤。
Sanity配置
1. 注册Sanity账号
2. 创建项目
注册完成后，您需要创建一个新的Sanity项目。首先进入Sanity管理界面，在顶部导航栏找到并点击“Select a project”按钮，在下拉菜单中选择“New project”，然后：
输入项目名称
选择是否使用默认数据集配置
选择项目模板（选择“Next.js”模板）
点击“Create project”完成创建
这些内容将用于后续测试数据同步和展示功能。
3. 配置API访问
创建项目后，我们还需要针对API进行相关配置。在Sanity管理界面中，点击下方选项卡中的“API”选项，您将看到API配置面板，其中包含以下配置选项：
Tokens：用于创建和管理API访问令牌
CORS origins：配置允许访问API的域名。当您的Next.js应用部署到云服务后，需要通过AJAX请求访问Sanity API获取数据，此时需要在CORS origins中配置您的应用域名，以确保Sanity服务器返回正确的跨域访问头（CORS headers），允许您的应用正常访问API数据
为了您的数据安全，请妥善保存Project ID和Dataset Name，它们将用于配置Next.js与Sanity的连接。
4. 配置内容模型
Sanity的内容管理是通过Sanity Studio来实现的。Sanity Studio是一个可定制的内容管理界面，它提供了直观的界面来管理您的内容。
Sanity Studio的主要功能包括：
可视化地创建和编辑内容
自定义内容编辑界面
管理媒体文件（图片、视频等）
实时预览内容效果
管理用户权限和访问控制
您可以在本地机器的终端下通过以下命令创建Sanity Studio：
npm create sanity@latest -- --project {projectId} --dataset production --template clean --typescript --output-path studio-{your-project-name}cd studio-{your-project-name}
请将 {projectId} 替换为您的Sanity项目ID，{your-project-name} 替换为您想要的项目名称。
Sanity Studio的内容模型定义在
schemaTypes 目录下，您可以在这里定义多个模型文件，然后在 schemaTypes/index.ts 中统一引入。例如，我们可以创建一个 postType.ts 文件来定义博客文章的内容模型：import {defineField, defineType} from 'sanity'export const postType = defineType({name: 'post',title: 'Post',type: 'document',fields: [defineField({name: 'title',type: 'string',validation: (rule) => rule.required(),}),defineField({name: 'slug',type: 'slug',options: {source: 'title'},validation: (rule) => rule.required(),}),defineField({name: 'category',type: 'string',validation: (rule) => rule.required(),})],})
然后在
schemaTypes/index.ts 中引入这个模型：import {postType} from './postType'export const schemaTypes = [postType]
这个内容模型定义了以下字段：
title：文章标题（必填）
slug：文章URL别名（必填，基于标题自动生成）
category：文章分类（必填）
您可以根据需要修改这些字段定义，添加或删除字段。
5. 启动Sanity Studio
在项目根目录下运行以下命令启动Sanity Studio：
npm run dev
启动后，访问
http://localhost:3333 即可进入Sanity Studio的内容管理界面。
6. 部署Sanity Studio
完成内容配置后，您需要将Studio部署到Sanity平台。在项目根目录下运行 npm run deploy。
在部署过程中，系统会提示您输入一个项目名称（例如：my-blog），部署完成后，您可以通过
https://my-blog.sanity.studio 访问您的Sanity Studio。现在，您之前通过 http://localhost:3333 访问的本地Studio界面，已经可以通过这个在线地址访问了。接下来，您可以在线Studio中添加内容：
至此，我们已经完成了Sanity内容管理系统的配置。现在您可以通过在线Studio轻松管理网站内容。接下来，我们将开始配置前端应用，通过Sanity API获取这些内容并展示在网站上。
部署到 EdgeOne Pages
完成 Sanity 配置后，您需要设置必要的开发环境变量，以便您的应用能够正确连接到这些服务。可以将对应参数填入到本地 .env 进行本地开发，需要部署到 EdgeOne Pages 中还需要填入环境变量。
1. 使用模版创建应用
EdgeOne Pages 已经为您准备了一个基于 Next.js 的完整模板，支持增量静态再生 (ISR) 功能，在模版页面找到 Portfolio with Sanity，点击 Deploy 进入到部署页面。
2. 填写环境变量
在 EdgeOne Pages 配置面板中，您需要填写两项 Sanity 相关的环境变量信息：
NEXT_PUBLIC_SANITY_PROJECT_ID：填入您的Sanity Project ID
NEXT_PUBLIC_SANITY_DATASET：填入您的Sanity Dataset Name
注意：
若未配置上述 Sanity 环境变量，ISR 功能将自动关闭，默认读取保存在仓库代码中
src/content/projects 的 markdown 内容，如果不需要 CMS 进行内容管理您可以直接修改 markdown 内容以维护内容。完成上述环境变量配置后，点击 “立即创建” 开始部署，等待部署完成后将显示部署成功界面。
3. 使用和验证
配置好上述数据模版之后 ，启动 Sanity Studio，在对应的 project 和 dataset 中配置或者增加数据，无需重新部署项目将会看到作 portfolio 数据增加或者改变。
注意：
默认的定时增量更新的时间间隔为 60s 根据实际情况可修改
src/conf/index.ts 下的 NEXT_REVALIDATE 值.至此，我们已经完成了 Sanity 方案的完整部署流程。通过这个方案，你可以：
使用 Sanity 管理内容，享受其强大的 Headless CMS 功能
集成 Next.js 的 ISR（增量静态再生）技术，自动实现定时内容更新，同时保持静态页面的极致性能
通过 EdgeOne Pages 实现自动化部署，简化运维工作
获得全球 CDN 加速，提升用户体验
更多相关内容
查看更多Sanity集成方案：EdgeOne Pages提供的Sanity模板
了解Next.js更多功能：Next.js官方文档
探索Sanity更多功能：Sanity官方文档