Setting up Next.js with Sanity Studio: A Step-by-Step Guide

Step 1: Create a new Next.js project

To create a new Next.js project, you can use the create-next-app command. Open your command line interface and run the following command:

npx create-next-app

This will create a new Next.js project in a directory named after your project.

Step 2: Install Sanity Studio

Now, let's set up Sanity Studio, the content editing environment for your project. In your command line interface, navigate to the root directory of your Next.js project and run the following command:

npm create sanity@latest -- --template clean --create-project "Sanity Project" --dataset production

This command will guide you through the setup process. Here's what each question means:

1. Create an account: Select a login provider from the list of options and confirm with Enter. This will open a browser window for you to create a Sanity account. Once you've created the account, come back to the command line window.
2. Would you like to add configuration files for a Sanity project in this Next.js folder? Answer: Yes
3. Would you like an embedded Sanity Studio? Answer: Yes
4. Would you like to use the Next.js app directory for routes? Answer: Yes
5. What route do you want to use for the Studio? Answer: /studio
6. Select project template to use: Answer: Clean project with no predefined schemas
7. Would you like to add the project ID and dataset to your .env file? Answer: Yes

Wait for the installation process to complete. Once you see a "Success!" message, you can move on to the next step.