文档反馈官招募中，报名立赚积分兑换代金券！> HOT
文档中心>边缘安全加速平台 EO>Pages>集成指南>CMS>Sanity 集成

Sanity 集成

最近更新时间：2026-01-09 17:47:33

我的收藏

本页目录：

本文介绍如何将 Sanity 作为 Headless CMS，配合 Next.js 框架构建高性能网站。通过 EdgeOne Pages 的一键部署能力，您可以快速完成 Sanity 和 Next.js 的集成，同时获得全球 CDN 加速，实现网站的最佳性能和用户体验。

快速入门

EdgeOne Pages 提供了完整的 Sanity + Next.js 集成方案 模板。您可以点击模板中的部署按钮进行快速部署。
本文的集成介绍主要包含以下三个步骤：配置 Sanity 作为数据源、使用 Next.js 生成页面、部署到 EdgeOne Pages。如果您想了解这个方案的具体实现原理，或者需要根据自身需求进行定制化开发，可以继续阅读下面的详细配置步骤。

Sanity配置

1. 注册 Sanity 账号

使用 Sanity 首先要做的就是注册一个账号，访问 Sanity官网，点击“Get Started”开始注册。Sanity 只提供30天的免费试用期，之后需要付费使用。

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 内容管理系统的配置。现在您可以通过在线 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. 使用和验证

portfolio-with-sanity 模板提供了默认的内容模型文件：postType.ts，您可以根据需要参考使用，将其拷贝到 Sanity Studio 项目中。
配置好上述数据模板之后 ，启动 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 官方文档。
中国站
目录