How to Upgrade Sanity Studio from v2 to v3 with Next.js 13 - Complete Migration Guide

Sanity Studio v3 is here. It has lot of exciting features, but came with a lot of breaking changes. So upgrading sanity to v3 will be a tedious task. Everything from code to structure changed on how we developed in the past. In this guide, I want to make it simplify for you. This migration guide is written along wth the Next 13 so you can keep up with both the world.

Before starting, please read the following:

• Sanity v3 Announcement
• Sanity v3 Docs
• Sanity Official Migration guide

So, let's start.

1. Project Path

Let's start with the obvious one. Our Project path. Previously all of our sanity files were in a separate project folder called studio with its own package manager & node_modules.

In v3, we can combine those in to a single next.js project where sanity feels like a normal react plugin. With one config file on root and a schema folder, you are ready to deploy sanity studio to the production.

# v2

└── v2-project/
    ├── pages
    ├── public
    ├── styles
    ├── studio/
    │   ├── config
    │   ├── plugins
    │   ├── schemas
    │   ├── src
    │   ├── static
    │   ├── .gitignore
    │   ├── package.json
    │   ├── sanity.json
    │   └── tsconfig.json
    ├── .gitignore
    ├── package.json
    ├── next.config.js
    └── tsconfig.json

In this approach, we had to run next & sanity on separate terminals with differrent package.json.

In v3, your project will look like this:

# v3

└── v3-project/
    ├── pages
    ├── public
    ├── styles
    ├── sanity/
    │   ├── schemas
    │   ├── plugins
    │   └── lib
    ├── .gitignore
    ├── package.json
    ├── next.config.js
    ├── tsconfig.json
    ├── sanity.cli.js
    └── sanity.config.js

As you can see, its simplified most of its code and eliminated extra 500mb of node_modules. That'a a win-win.

Sanity Package

Another thing you might notice is that now there is only single package called sanity instead of multiple @sanity plugins. You also don't need global @sanity/cli anymore since its already included in sanity. But this comes with a change in how we run studio.

// v2

// Terminal
> sanity start


// v3
// in package,json
  "scripts": {
    ...
    "sanity": "sanity dev",
    ...
  },

// Terminal
> npm run sanity
> yarn sanity
> pnpm sanity

// or
// without script in package,json

> npm run sanity dev
> yarn sanity dev
> pnpm sanity dev

[This is a WIP post, come back later]