DEV Community

Cover image for Setup Sanity CMS Within A Next.js 13 Project
Mayowa Adeniyi
Mayowa Adeniyi

Posted on • Updated on

Setup Sanity CMS Within A Next.js 13 Project


According to website, Sanity is a headless content management system (CMS) that gives you total composability. A fully decoupled, real-time content back end.

Why use Sanity?

  • 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.

Next.js project setup and installation

To create a new Next.js project in your terminal, run the following command to scaffold a new project.

npx create-next-app@latest
Enter fullscreen mode Exit fullscreen mode

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.

create next app step-by-step guide

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
Enter fullscreen mode Exit fullscreen mode

Next, open the web browser and visit localhost:3000. The default Next.js project will be running on port 3000.

Next.js project created successfully

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.

Sanity project setup and installation

Before creating a new Sanity project, you must create an account with Sanity. If you don't have an account, you can sign up here.

Once you have created an account, run the following command in your terminal to create a new Sanity project.

npm create sanity@latest
Enter fullscreen mode Exit fullscreen mode

Use the arrow keys and select Create new project:

Sanity creates new project

A new prompt is displayed. Give your Sanity project a desired name of your choice:

Add a project name in Sanity

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.

setting up a new sanity

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 embedded in a Nex.js13 project

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 localhost:3000/studio.

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.

enable cors for a new sanity project

A new screen will be displayed once you have clicked the Continue button. Then click on the Add CORS Origin button.

cors added to a new sanity project

You can select the provider you signed up with previously to access your Sanity account.

Sanity Studio login providers

You will be automatically redirected to localhost:3000/studio/desk.

This page shows the blog schema, which means that Sanity Studio is embedded and running successfully within your Next.js 13 application.

sanity running successfully within a next.js app

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.


Top comments (3)

innocentamadi profile image
Innocent Amadi

This is a really good post @mayorstacks I haven't heard about Sanity before now, and I've been passively hunting for a nextjs CMS solution. Will most definitely check it out.

I like how you kept this introductory blog post simple and practical. It was easy to follow through.

mayorstacks profile image
Mayowa Adeniyi

@innocentamadi Thank you for the kind words 🙏
Checkout Sanity it's a good modern content management platform.

rascojet profile image
Rasco Adeniyi

This is a good post on setting up Sanity CMS Within a Next.js 13 project. You can also share a repo/url demo if available. Keep it up 👍