Sanity 正式上线 Vercel Marketplace，支持在控制台原生集成 CMS

1 分钟阅读

2026 年 2 月 6 日

Sanity 现已在 Vercel Marketplace 上线，作为原生 CMS 集成提供。现在团队可以直接在 Vercel dashboard 中安装、配置并管理 Sanity，无需再手动设置 API Token 和环境变量。

这一集成将 CMS 的配置过程保留在你现有的 Vercel 工作流内，不再需要切换到单独的 dashboard 来做资源开通和账号管理。

Link to heading开始使用该集成

先定义内容 schema、配置 client，然后开始拉取内容。Schema 用代码定义内容结构，包括文档类型及其字段。

src/sanity/schemaTypes/postType.ts

code

import { defineField, defineType } from "sanity";export const postType = defineType({  name: "post",  title: "Post",  type: "document",  fields: [    defineField({ name: "title", type: "string" }),    defineField({ name: "slug", type: "slug", options: { source: "title" } }),    defineField({ name: "body", type: "array", of: [{ type: "block" }] }),  ],});

定义一个 post 文档类型，包含 title、slug 和富文本 body 字段。

在 index 文件中注册 schema 类型，Sanity 才能加载它们。

src/sanity/schemaTypes/index.ts

code

import { postType } from "./postType";export const schemaTypes = [postType];

导出所有 schema 类型，供 Sanity Studio 使用。

Sanity client 用于连接应用与内容。Marketplace 集成会自动将 project ID 作为环境变量完成注入。

src/sanity/lib/client.ts

code

import { createClient } from "next-sanity";export const client = createClient({  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,  dataset: "production",  apiVersion: "2024-01-01",  useCdn: false,});

创建一个可复用的 client，并通过项目环境变量完成配置。

当 client 配置完成后，你就可以用 GROQ（Graph-Relational Object Queries）来拉取内容。GROQ 是 Sanity 的查询语言，可精确请求你需要的字段。

src/app/page.tsx

code

import { client } from "@/sanity/lib/client";const POSTS_QUERY = `*[_type == "post"] | order(publishedAt desc)[0...12]{  _id, title, slug, publishedAt}`;export default async function HomePage() {  const posts = await client.fetch(POSTS_QUERY);  return (    <ul>      {posts.map((post) => (        <li key={post._id}>{post.title}</li>      ))}    </ul>  );}

拉取最近 12 篇文章，并以列表形式渲染。

从安装到内容拉取，你只需要以上这些步骤。立即前往 Vercel Marketplace 安装 Sanity 开始使用，或直接部署 Next.js + Sanity Personal Website 模板，从可运行示例快速起步。

Sanity 正式上线 Vercel Marketplace，支持在控制台原生集成 CMS

Link to heading开始使用该集成

相关文章