Sanity Integration
Sanity is a modern Headless CMS that provides powerful content management functionality 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 with outstanding performance.
Overview
This article introduces how to use Sanity as a Headless CMS in conjunction with the Next.js framework to build high-performance websites. 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 article introduces the integration process in three steps: configure Sanity as a data source, use Next.js to generate webpages, and deploy to EdgeOne Pages. If you want to learn about the specific implementation principles of this solution or require customized development based on your needs, proceed to read the detailed configuration steps below.
Configuring Sanity
1. Register a Sanity Account
To use Sanity, first register an account by visiting Sanity's official website and clicking "Get Started". 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, then select "New project" in the pull-down menu.
Enter project name
Select whether to use 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-related 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: Create and manage API access tokens
CORS origins: Configure 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 retrieve data, you must configure your application's domain name in CORS origins to ensure the Sanity server returns the correct CORS headers, allowing your application normal access to API data.
For the security of your data, 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 customizable 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.
The content model in Sanity Studio 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 to define the content model for blog articles: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 generated based on title)
category: Article category (required)
The field definition can be modified as needed, add or delete fields.
5. Start Sanity Studio
Run the following command in the project root directory to start Sanity Studio:
npm run dev
After startup, access
http://localhost:3333 to enter the Sanity Studio management interface.
6. Deploy Sanity Studio
After completing 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 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.You can now 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 configure the frontend application to retrieve these contents via the Sanity API and display them on the website.
Deploy to EdgeOne Pages
After completing the Sanity configuration, you need to set the required development environment variables so that your application can connect to these services. You can enter the corresponding parameters into the local .env file for local development. To deploy to EdgeOne Pages, you also need to fill in the environment variables.
1. Using Templates to Create an Application
EdgeOne Pages has prepared a complete Template based on Next.js for you, supporting incremental static regeneration (ISR) feature. Find Portfolio with Sanity on the template page and click Deploy to enter the deployment page.
2. Fill in Environment Variables
In the EdgeOne Pages configuration panel, you need to fill in two Sanity-related environment variable information:
NEXT_PUBLIC_SANITY_PROJECT_ID: Fill in your Sanity Project ID
NEXT_PUBLIC_SANITY_DATASET: Fill in your Sanity Dataset Name
Note: If the above Sanity environment variables are not configured, the ISR feature will automatically close and default read markdown content saved in the repository codesrc/content/projects. If CMS content management is not required, you can directly modify markdown content to maintain it.
After completing the environment variable configuration, click Create to start deployment. Wait for deployment to complete, then the deployment successful interface will display.
3. Use and Verification
The portfolio-with-sanity template provides a default model file: postType.ts. You can reference and copy it to your Sanity Studio project based on your needs.
After configuring the above data template, start Sanity Studio. Configure or add data in the corresponding project and dataset. No need to redeploy, the project will show portfolio data additions or changes.
The default scheduled incremental update interval is 60s. It can be modified insrc/conf/index.tsby changing theNEXT_REVALIDATEvalue depending on the actual situation.
We have now completed the full deployment of the Sanity solution. With this solution, you can:
Use Sanity to manage content and enjoy its powerful Headless CMS features.
Seamless integration with Next.js ISR (Incremental Static Regeneration) technology, automatically implementing scheduled content updates while maintaining static page's superior performance.
Deploy automatically with EdgeOne Pages to 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