Introduction
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.
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 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
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 3000.
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
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 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.
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 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.
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.
Top comments (3)
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.
@innocentamadi Thank you for the kind words 🙏
Checkout Sanity it's a good modern content management platform.
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 👍