TUTORIAL - How to embed Sanity Studio within a Next.js project

Set up a Next.js project with an embeded Sanity Studio

Prerequisites

You must have Node.js installed on your computer and have a Sanity.io account.

Create Next.js Project

Start by running the following command in the terminal:

npx create-next-app@latest

Next.js configuration suggestions:

• Specify custom name (eg. my-project)
• Use Typescript - Yes
• Use ESLint - Yes
• Use Tailwind - No
• Use src/ directory - No
• Use app Router - Yes
• Costomize import alias - No

Great! You now have a Next.js application called "my-project" (or your custom name) set up.

To run and view your project run the following commands in the terminal:

cd my-project

npm run dev

Open http://localhost:3000 to view your project.

Create Sanity Studio

Make sure you are back outside of your Next.js project and run:

npm create sanity@latest

Sanity Studio configuration suggestions:

• Select "Create new project"
• Specify custom name (eg. my-project-studio)
• Use default dataset - Yes
• Check that the project output path is correct
• Select "Clean project with no predefined schema types"
• Use Typescript - Yes
• Select "npm" for package manager

Great! You now have a Sanity Studio called "my-project-studio" (or your custom name) set up.

To run and view your project run the following commands in the terminal:

cd my-project-studio

npm run dev

Open http://localhost:3333 to view your sanity studio.

You now should have two separate directories:

1. my-project (This is your Next.js project)
2. my-project-studio (This is your Sanity Studio)

Connect the Next.js Project to Sanity Studio

Go to your Sanity Studio Dashboard at https://www.sanity.io/manage:

• Select "my-project-studio" and add http://localhost:3000 as a CORS origin under the API tab.
• Select the "API" tab
• Select "Add CORS origin"
• Add http://localhost:3000 as the URL
• Select "Allow credentials"
• Select "Save"

NOTE: When you deploy your site, you will have to repeat this step with the new URL.

Great! Your Next.js project running on port 3000 now has access to the sanity studio.

Embed Sanity Studio into the Next.js Project

Now you can combine the two directories (my-project and my-project-studio) into only one directory. To do this, you will integrate the Sanity Studio into the Next.js project so you will only be left with the Next.js project with the Sanity Studio embeded into it.

Install Sanity libraries

You can now stop running the development servers "Ctrl + c"

Enter into the Sanity Studio

cd my-project-studio`

Copy the project id from "sanity-config.ts"

projectId: "dbulmktz";

Enter into the Next.js project

cd ..

cd my-project

Install sanity packages

• "sanity" is the main sanity package
• "next-sanity" is the specific library for Next.js

npm install sanity next-sanity

Create sanity config file

Create "sanity.config.ts" file in the root of your Next.js project

Add the following code to your "sanity.config.ts" file:

import { defineConfig } from "sanity";
import { structureTool } from "sanity/structure";
// import schemas from "./sanity/schemas";

const config = defineConfig({
  projectId: "h4bvfsj2", // project id copied from the sanity studio
  dataset: "production", // dataset configuration
  title: "My Personal Website", // name of project
  apiVersion: "2023-04-24", // todays date
  basePath: "/admin", // path for sanity studio
  plugins: [structureTool()], // Use to view studio
  // schema: { types: schemas }, // schema configuration (Not yet relevant)
});

export default config;

Create Sanity Studio Page

Create app router path for your Sanity Studio:

• Create admin directory in the app directory.
• Create "[[...index]]" directory in the admin directory.
• Create "page.tsx" file in the "[[...index]]" directory.
• Add the following code to your "page.tsx" file:

"use client";

import { NextStudio } from "next-sanity/studio";
import config from "@/sanity.config";

export default function AdminPage() {
  return <NextStudio config={config} />;
}

Great! You can now access the Sanity Studio within your Next.js project at the /admin route.

Run the embeded studio at http://localhost:3000/admin

Additional Steps

Create Sanity files

Create a new directory called "sanity" in the root of the project. This directory will house all of the files (including your schemas) for building your Sanity Studio.

Create separate layouts for the Project and for the Sanity Studio

Create a new directory called "(studio)" in the app directory. This is where your "admin" directory will go into along with a "layout.tsx" that will provide the layout for the Sanity Studio

Create a new directory called "(site)" in the app directory. This is where all the other pages and layouts of your project will be located.

This setup allows you to fully customize the layout of your project without affecting breaking the layout of the Sanity Studio.

Logout and Login to Sanity

Use "sanity logout" and "sanity login" to logout and login to your sanity account.

sanity logout

sanity login