Setup Sanity CMS Within A Next.js 13 Project
Tags: nextjs, sanity, beginners, webdev
Published: 2023-05-14 21:14:18

## Introduction

According to [Sanity.io](https://www.sanity.io/) 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.

## Prerequisites
Before you get started with this article, you will need the following:

- [Node.js](https://nodejs.org/en) 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.

```javascript
npx create-next-app@latest
```
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lx8ql8zp7pao077sipfz.PNG)

This will set up a new Next.js project. Navigate into the project directory and start the local development server.

```javascript
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 `3000`.


![Next.js project created successfully](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e0wodmvxpblsg5ghlq75.png)

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](https://www.sanity.io/). If you don't have an account, you can sign up [here](https://www.sanity.io/login/sign-up).

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

```javascript
npm create sanity@latest
```
Use the arrow keys and select **Create new project**:

![Sanity creates new project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wu46uq5f39wchjjm33hb.PNG)

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


![Add a project name in Sanity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zyrisw9ni3rijfs8txr3.PNG)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pp5cshhjkhadzjji7s9v.PNG)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fuihi3touvcv4xpfpe6g.PNG)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21icfvjqsmh0jzlbqvqy.PNG)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/exbgns4acegq7f8268ig.PNG)

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


![Sanity Studio login providers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5a1q6dq2ohh92dn3xwqw.PNG)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y98qlmndsesuxko85j8z.PNG)

By embedding **Sanity Studio** into a Next.js project, this is how to set up a Sanity project within a Next.js 13 application.

## Conclusion
This article shows how to embed a new Sanity project within a Next.js 13 application.

## Resources

-  [Official Next.js Documentation](https://nextjs.org/docs)

- [Official Sanity Documentation](https://www.sanity.io/docs)