边缘开发者平台

Pages
- 产品简介
- 快速开始
  - 导入 Git 仓库
  - 从模板开始
  - 直接上传
- 框架指南
- 项目指南
  - 项目管理
  - edgeone.json
  - 缓存配置
  - 错误码
- 构建指南
- 部署指南
  - 概览
  - 触发部署
  - 管理部署
  - 部署按钮
  - 使用 Github Action
- 域名管理
  - 概览
  - 自定义域名
  - 配置 HTTPS 证书
  - 如何配置 DNS 的 CNAME 记录
- Pages Functions
- KV 存储
- 边缘 AI
- API Token
- EdgeOne CLI
- Pages MCP
- 集成指南
  - 数据库
    - Supabase 集成
    - Pages KV 集成
  - 电商
    - Shopify 集成
    - WooCommerce 集成
  - 支付
    - Stripe 集成
    - Paddle 集成
  - CMS
    - WordPress 集成
    - Contentful 集成
    - Sanity 集成
  - 身份验证
    - Supabase 集成
    - Clerk 集成
- 最佳实践
  - 使用 Deepseek-R1 模型快速搭建对话型AI站点
  - 使用 WordPress + WooCommerce 和 GatsbyJS 搭建电商平台
  - 使用 Supabase 和 Stripe 搭建 SaaS 站点
  - 如何快速搭建公司品牌站点
- 迁移指南
  - 从 Vercel 迁移至 EdgeOne Pages
  - 从 Cloudflare Pages 迁移至 EdgeOne Pages
  - 从 Netlify 迁移至 EdgeOne Pages
- 排障指南
- 常见问题
- 联系我们
- 产品动态

当前为国际站中文文档，如需访问中国站文档，请点击这里

Sanity 集成

Sanity是一个现代化的Headless CMS，它提供了强大的内容管理功能和灵活的API，使其成为构建高性能网站的绝佳选择。通过将Sanity与Next.js框架结合，我们可以构建出既易于管理又性能卓越的网站。
概览
本文介绍如何将Sanity作为Headless CMS，配合Next.js框架构建高性能网站。通过EdgeOne Pages的一键部署能力，您可以快速完成Sanity和Next.js的集成，同时获得全球CDN加速，实现网站的最佳性能和用户体验。
快速入门
EdgeOne Pages提供了完整的Sanity + Nextjs集成方案模版。您可以点击模版中的部署按钮进行快速部署。
本文的集成介绍主要包含以下三个步骤：配置Sanity作为数据源、使用Next.js生成页面、部署到EdgeOne Pages。如果您想了解这个方案的具体实现原理，或者需要根据自身需求进行定制化开发，可以继续阅读下面的详细配置步骤。
Sanity配置
1、注册Sanity账号
使用Sanity首先要做的就是注册一个帐号，访问 Sanity官网，点击"Get Started"开始注册。Sanity只提供30天的免费试用期，之后需要付费使用。
2、创建项目
注册完成后，您需要创建一个新的Sanity项目。首先进入Sanity管理界面，在顶部导航栏找到并点击"Select a project"按钮，在下拉菜单中选择"New project"，然后：
1. 输入项目名称
2. 选择是否使用默认数据集配置
3. 选择项目模板（选择"Next.js"模板）
4. 点击"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已经为您准备了一个基于Next.js的完整模板，您可以直接使用。让我们开始获取模板：
git clone --depth 1 --single-branch https://github.com/TencentEdgeOne/pages-templates.git temp
mv temp/examples/portfolio-with-sanity .
rm -rf temp
cd portfolio-with-sanity
安装依赖 npm install。
portfolio-with-sanity项目下提供了默认的内容模型文件：postType.ts，您可以根据需要参考使用，将其拷贝到studio项目中。
模板中已经包含了读取Sanity数据的配置代码，位于 src/lib/sanity.ts：
import { createClient } from 'next-sanity'
﻿
const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID;
const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET || 'production';
﻿
if (!projectId || !dataset) {
  throw new Error('未设置 Sanity 环境变量。请确保设置了 NEXT_PUBLIC_SANITY_PROJECT_ID 和 NEXT_PUBLIC_SANITY_DATASET');
}
﻿
console.log('Sanity 配置:', {
  projectId,
  dataset,
  apiVersion: '2024-03-01',
  useCdn: false, // 本地开发时禁用 CDN
  perspective: 'published'
});
﻿
export const client = createClient({
  projectId,
  dataset,
  apiVersion: '2024-03-01',
  useCdn: false, // 本地开发时禁用 CDN 
})
在项目根目录创建 .env.local 文件，填入以下内容：
NEXT_PUBLIC_SANITY_PROJECT_ID=${your sanity space ID}
NEXT_PUBLIC_SANITY_DATASET=${your sanity dataset}
让我们先在本地执行npm run dev进行预览验证项目部署是否正确：
﻿
注意：部署到EdgeOne Pages时，需要在环境变量配置中设置以下参数：
NEXT_PUBLIC_SANITY_PROJECT_ID：您的Sanity Project ID
NEXT_PUBLIC_SANITY_DATASET：您的Sanity Dataset name
至此，我们已经完成了Sanity内容管理系统的配置、前端模板的获取和本地环境的验证。接下来，我们只需要将代码部署到EdgeOne Pages，就可以让您的网站正式上线了。
部署到EdgeOne Pages
1、代码发布到 Git
将代码提交到git仓库即可完成部署。假设你已经创建了 portfolio-with-sanity 项目，并且将当前目录关联到了该项目，使用以下命令提交：
git add .
git commit -m "Initial commit"
git push origin main
2、项目导入 Pages
提交完成后，如果你已经是EdgeOne Pages用户且已关联GitHub账户，访问 控制台 部署对应的项目即可。
﻿
3、添加环境变量
点击部署portfolio-with-sanity后，在准备部署界面点击"Environment Variables"，分别配置以下环境变量：
NEXT_PUBLIC_SANITY_PROJECT_ID：填入您的Sanity Project ID
NEXT_PUBLIC_SANITY_DATASET：填入您的Sanity Dataset Name
﻿
配置完成后，点击"Start Deployment"按钮，等待部署完成后将显示部署成功界面：
﻿
至此，我们已经完成了Sanity方案的完整部署流程。通过这个方案，你可以：
使用Sanity管理内容，享受其强大的Headless CMS功能
利用Next.js生成高性能页面，获得极致的访问速度
通过EdgeOne Pages实现自动化部署，简化运维工作
获得全球CDN加速，提升用户体验
﻿
更多相关内容
查看更多Sanity集成方案：EdgeOne Pages提供的Sanity模板﻿
了解Next.js更多功能：Next.js官方文档﻿
探索Sanity更多功能：Sanity官方文档﻿