According to Sanity.io website, Sanity is a headless content management system (CMS) that gives you total composability. A fully decoupled, real-time content back end.
Real-time collaboration: Multiple team members can collaborate on content in real-time.
Rich content editing experience: Sanity offers an intuitive and visually appealing content editing interface to simplify content creation and editing for you.
Content customization: You can design your content schemas and structures to meet your needs.
Extensive integrations: Sanity integrates with various tools and services, e-commerce platforms, analytics solutions, and marketing automation.
Next.js (a React framework for building web applications) will be used as the front-end framework with Sanity Studio. More about Sanity Studio in the later part of this article.
This article will show how to embed a new Sanity project within a Next.js 13 application.
Before you get started with this article, you will need the following:
Node.js installed on your machine.
Yarn package manager to run the script.
To create a new Next.js project in your terminal, run the following command to scaffold a new project.
The command above will create a new Next.js project. A series of prompts are displayed. Select No to the
src/ directory prompt and choose Yes to all other displayed prompts.
This will set up a new Next.js project. Navigate into the project directory and start the local development server.
cd <project name>
yarn run dev
Next, open the web browser and visit
localhost:3000. The default Next.js project will be running on port
This shows that Next.js has been installed successfully. Now that you have a Next.js project up and running, it's time to set up a Sanity project.
Once you have created an account, run the following command in your terminal to create a new Sanity project.
npm create sanity@latest
Use the arrow keys and select Create new project:
A new prompt is displayed. Give your Sanity project a desired name of your choice:
A series of prompts are displayed. Select Yes to all the prompts and choose the blog schema as a project template.
The blog schema is a predefined editor template. In other words, some schemas were already generated for you automatically, and this blog schema can be edited within the Sanity Studio. There is also an option to select a clean template, but we will use the blog schema template.
This creates a new Sanity project. You will see some configuration files at the root of the project. Notice there is a new folder called sanity. The schemas and some other utility files are kept there.
Sanity Studio is an application user interface that manages all your content. This is where you add, edit, and publish content. In this article, Sanity Studio is embedded within the Next.js 13 application, and you can access your content from there.
Next, open the web browser and visit
localhost:3000/studio. This is the base path where Sanity Studio can be found.
With Sanity Studio, you can access all your content locally at
But before you can access your content from Sanity Studio, you must add
localhost:3000 as CORS (Cross-Origin Resource Sharing) to your Sanity project. To add CORS Origin, click the Continue button.
A new screen will be displayed once you have clicked the Continue button. Then click on the Add CORS Origin button.
You can select the provider you signed up with previously to access your Sanity account.
You will be automatically redirected to
This page shows the blog schema, which means that Sanity Studio is embedded and running successfully within your Next.js 13 application.
By embedding Sanity Studio into a Next.js project, this is how to set up a Sanity project within a Next.js 13 application.
This article shows how to embed a new Sanity project within a Next.js 13 application.