Sanity Integration
Sanity is a modern Headless CMS that provides powerful content management capabilities and a flexible API, making it an excellent choice for building high-performance websites. By combining Sanity with the Next.js framework, we can build websites that are easy to manage and deliver outstanding performance.
Overview
This article introduces how to use Sanity as a Headless CMS with the Next.js framework to build a high-performance website. With EdgeOne Pages' one-click deployment capability, you can quickly complete the integration of Sanity and Next.js, while obtaining global CDN acceleration to achieve the best performance and user experience for your website.
Getting Started
EdgeOne Pages provides a complete Sanity + Nextjs integration solution template. You can click the deploy button in the template to quickly deploy.
This document introduces the integration procedure in three steps: configure Sanity as a data source, use Next.js to generate webpages, and deploy to EdgeOne Pages. If you want to understand the specific implementation principles of this solution or perform customized development based on your needs, proceed to the detailed configuration steps below.
Sanity Configuration
1. Register a Sanity Account
To use Sanity, first register an account by visiting Sanity official website and clicking "Get Started" to begin. Sanity only provides a 30-day free trial, after which paid use is required.
2. Creating a Project
After registration, you need to create a new Sanity project. First enter the Sanity management interface, find and click the "Select a project" button in the top navigation bar, select "New project" in the pull-down menu, then:
Enter project name
Select whether to use the default dataset configuration
Select project template (select "Next.js" template)
Click "Create project" to complete the creation

These contents will be used for follow-up test data sync and display functionality.
3. Configuring API Access
After creating a project, we also need to configure API options. In the Sanity management interface, click the "API" option in the tab below. You will see the API configuration panel, including the following configuration options:
Tokens: Used for creating and managing API access tokens
CORS origins: Configure the domain names allowed to access the API. When your Next.js application is deployed to a cloud service and needs to access the Sanity API via AJAX requests to obtain data, you must configure your application's domain name in CORS origins. This ensures the Sanity server returns the correct CORS headers, allowing your application normal access to API data.

For data security, keep Project ID and Dataset Name secure. They are used for configuration to connect Next.js with Sanity.
4. Configure a Content Model
Sanity's content management can be achieved by Sanity Studio. Sanity Studio is a customized content management interface that provides an intuitive interface to manage your content.
The main features of Sanity Studio include:
Visually create and edit content
Custom content editing view
Managing media files (images, videos)
Real-time preview content effect
Manage user permissions and access control
You can create Sanity Studio through the following command in the terminal of your local machine.
npm create sanity@latest -- --project {projectId} --dataset production --template clean --typescript --output-path studio-{your-project-name}cd studio-{your-project-name}
Replace {projectId} with your Sanity project ID and {your-project-name} with your desired project name.

Sanity Studio's content model is defined under the
schemaTypes
directory. Here you can define multiple model files, then import them uniformly in schemaTypes/index.ts
. For example, we can create a postType.ts
file for defining the blog article content model: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(),})],})
then import this model in
schemaTypes/index.ts
:import {postType} from './postType'export const schemaTypes = [postType]
This model defines the following fields:
Article title (required)
slug: Article URL alias (required, auto generate based on title)
category: Article category (required)
You can modify these field definitions, add or delete fields.
5. Start Sanity Studio
Run the following command in the project root directory to start up Sanity Studio:
npm run dev
After startup, visit
http://localhost:3333
to enter the Sanity Studio management interface.
6. Deploy Sanity Studio
After completing the content configuration, you need to deploy Studio to the Sanity platform. Run `npm run deploy` in the project root directory.
During deployment, the system will prompt you to manually input a project name (for example: my-blog). After deployment, you can access your Sanity Studio through
https://my-blog.sanity.studio
. Now, the local Studio interface you accessed earlier through http://localhost:3333
is already available at this online address.Next, you can add content in the online Studio:

We have now completed the configuration of the Sanity content management system. You can easily manage website content through the online Studio. Next, we will start configuring the frontend application to retrieve and display these contents on the website via the Sanity API.
Generating Static Files
We have already configured the content management system, but also need a static site generator to display these contents. EdgeOne has prepared a complete Template based on Next.js for you, which can be used directly. Let's start acquisition of the template:
git clone --depth 1 --single-branch https://github.com/TencentEdgeOne/pages-templates.git tempmv temp/examples/portfolio-with-sanity .rm -rf tempcd portfolio-with-sanity
npm install
The portfolio-with-sanity project provides a default model file: postType.ts. You can copy it to the studio project for reference.
The template already includes configuration code for reading Sanity data, located in
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 environment variable not set. Please ensure NEXT_PUBLIC_SANITY_PROJECT_ID and NEXT_PUBLIC_SANITY_DATASET are set');}console.log('Sanity config:', {projectId,dataset,apiVersion: '2024-03-01',useCdn: false, // Disable CDN for local developmentperspective: 'published'});export const client = createClient({projectId,dataset,apiVersion: '2024-03-01',useCdn: false, // Disable CDN for local development})
Create a
.env.local
file in the project root directory and fill in the following content:NEXT_PUBLIC_SANITY_PROJECT_ID=${your sanity space ID}NEXT_PUBLIC_SANITY_DATASET=${your sanity dataset}
Run npm run dev locally first to preview and verify whether the project deployment is correct.

When deploying to EdgeOne Pages, set the following parameters in the environment variable configuration:<NEXT_PUBLIC_SANITY_PROJECT_ID>: Your Sanity Project IDNEXT_PUBLIC_SANITY_DATASET
: Your SANITY DATASET name
We have now completed the configuration of the Sanity content management system, obtained the frontend template, and verified the local environment. Next, we only need to deploy the code to EdgeOne Pages for your website to officially go live.
Deploying to EdgeOne Pages
1. Publishing Code to Git
Submit the code to the git repository to complete the deployment. Assuming you have created the
portfolio-with-sanity
project and associated the current directory with it, use the following command to submit:git add .git commit -m "Initial commit"git push origin main
2. Importing a Project to Pages
After submission, if you are already an EdgeOne Pages user and have associated your GitHub account, visit the Console to deploy the corresponding project.

3. Adding an Environment Variable
Click deploy portfolio-with-sanity, then on the deployment page click "Environment Variables" and configure the following environment variables:
NEXT_PUBLIC_SANITY_PROJECT_ID
: Fill in your Sanity Project IDNEXT_PUBLIC_SANITY_DATASET
: Fill in your Sanity Dataset Name
After the configuration is complete, click the "Start Deployment" button. After deployment, the success interface will display.

We have completed the Sanity solution deployment process. With this solution, you can:
Use Sanity to manage content and enjoy its powerful Headless CMS features
Leverage Next.js to generate high-performance pages with ultimate access speed
Automate deployment with EdgeOne Pages and simplify ops
Obtain global CDN acceleration to enhance user experience
More Related Content
View more Sanity integration solutions: Sanity Template provided by EdgeOne Pages
Learn more about Next.js features: Next.js official documentation
Explore more Sanity features: Sanity official documentation