Sanity is now available on the Vercel Marketplace

Sanity is now available on the Vercel Marketplace as a native CMS integration. Teams can now install, configure, and manage Sanity directly from the Vercel dashboard, eliminating manual API token setup and environment variable configuration.

This integration keeps CMS setup inside your existing Vercel workflow instead of requiring a separate dashboard for provisioning and account management.

Link to headingGet started with the integration

Define your content schema, set up the client, and start fetching content. Schemas define your content structure in code, specifying document types and their fields.

1
import { defineField, defineType } from "sanity";
2

3
export const postType = defineType({
4
  name: "post",
5
  title: "Post",
6
  type: "document",
7
  fields: [
8
    defineField({ name: "title", type: "string" }),
9
    defineField({ name: "slug", type: "slug", options: { source: "title" } }),
10
    defineField({ name: "body", type: "array", of: [{ type: "block" }] }),
11
  ],
12
});

Register your schema types in an index file so Sanity can load them.

1
import { postType } from "./postType";
2

3
export const schemaTypes = [postType];

The Sanity client connects your application to your content. The Marketplace integration provisions the project ID as an environment variable automatically.

1
import { createClient } from "next-sanity";
2

3
export const client = createClient({
4
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
5
  dataset: "production",
6
  apiVersion: "2024-01-01",
7
  useCdn: false,
8
});

With the client configured, you can fetch content using GROQ (Graph-Relational Object Queries), Sanity's query language for requesting exactly the fields you need.

1
import { client } from "@/sanity/lib/client";
2

3
const POSTS_QUERY = `*[_type == "post"] | order(publishedAt desc)[0...12]{
4
  _id, title, slug, publishedAt
5
}`;
6

7
export default async function HomePage() {
8
  const posts = await client.fetch(POSTS_QUERY);
9
  return (
10
    <ul>
11
      {posts.map((post) => (
12
        <li key={post._id}>{post.title}</li>
13
      ))}
14
    </ul>
15
  );
16
}

That's all you need to go from install to fetching content. Install Sanity from the Vercel Marketplace to get started, or deploy the Next.js + Sanity Personal Website template to start from a working example.