How to embed sanity V3 studio in your Next js app

Sanity V3 has introduced tons of new and amazing features, one of which is that you don't need to have 2 separate projects, 1 for your front end and 1 to manage your content.

You can now have 1 project with Sanity Studio embedded which makes your life a lot easier, so let's dive in.

Create a Next js App

We'll create 2 separate projects first then we'll merge them together.

So start by creating a next js app using npx create-next-app@latest

Create a Sanity project

Once your next app is created go ahead and create a new sanity project inside your next app using npm create sanity@latest

When asked for the project template select Blog (schema)

Packages:

We only need one package which is next-sanity , it will help us connect our sanity studio with the front end.

So go ahead and install it using npm install next-sanity @sanity/client @portabletext/react @sanity/image-url

Merge the 2 projects

So now we have everything we need to get started and this is where things get interesting.

Goto the Next js app and open the package.json file, then go to the sanity project and open its package.json file next to the "Next app" package file.

So this is how things should look like:

1- Moving the dependencies

Now in the Sanity Project package.json file, in the dependencies, select the :

@sanity/vision

sanity

styled-components

and move them to the next js app package.json file

also, select the @sanity/eslint-config-studio from the devDependencies and move it to the next app package.json.

So now your package.json for the next js app should look like this:

Now we don't need the sanity package.json, feel free to close it.

Type yarn or npm i to install the new dependencies.

2- Moving the schemas and config files

In your sanity project, you'll find a folder called "schemas", move it to the root of your next js app.

also, take the sanity.cli.ts and the sanity.config.ts files and move them to the root of your next js app.

Now your folder structure should look like this:

And that's it!

We don't need the sanity project anymore and you simply delete it.

Embedding the studio

Sanity comes with its own editor where you can add/edit your content.

to access it you'll need to go to the app folder and create the following:

studio/[[...index]]/page.tsx

inside the page.tsx page the following code:

1"use client";
2
3import { NextStudio } from "next-sanity/studio";
4
5import config from "../../../../sanity.config";
6
7export default function Studio() {
8  return <NextStudio config={config} />;
9}
10

And now we're basically done.

If you go to http://localhost:3000/studio you will see the sanity editor where you can manage your content from the same project that contains your front end.

And don't worry about authentication, sanity protects the studio page by default, and only authorized users can access it.