Integrate Sanity with Next.js

If you are reading this article from my personal website (danielfullstack.com), then you are actually reading a blog that powered by Sanity CMS, which I am writing about today.

Sanity CMS is a headless content management system that integrates seamlessly with Next.js, and provides countless benefits from only the free tier!

By the end of this article, you will:

Have a working Sanity Project set up and ready to be used.
Be able to fetch your content from inside your Next.js apps.
Gain comprehensive knowledge on how Sanity works, and why it's a great headless CMS.

So without further ado... Let's dive right in!

Install dependencies

Create a Sanity Project

Create a sanity account
Create a new sanity project
Select "From scratch with CLI." (You may also select the other option if you are already comfortable with sanity).

Setup Environment Variables

1. Now we need to find your projectId and dataset.

Your projectId should be on your new project page, and also in the URL as follows: https://www.sanity.io/manage/personal/project/PROJECT_ID
Your dataset should be available here: https://www.sanity.io/manage/personal/project/PROJECT_ID/datasets. By default it should be called production

2. Create a file src/sanity/env.ts and save your projectId and dataset:

Setup Next.js with Sanity

There are quite a few files necessary to make Sanity work with Next.js.

I will list each file path relative to your Next.js directory, with the code and a relevant explanation below:

sanity.config.ts

This is the most important file. This is the configuration file for your sanity project.

sanity.cli.ts

This file ensures that your sanity CLI has the correct information to be able to communicate with your project. You can use the CLI by typing npm sanity.

src/app/studio/[[...tool]]

This is the only Next.js specific file. It is necessary to be able to access sanity studio on your website (e.g. example.com/studio).

src/sanity/schema.tsx

This file holds your sanity schema, which defines the shape of your content.

This is an example boilerplate for a blog schema, but feel free to change this by referencing the docs.

src/sanity/lib/client.ts

Defines the client API that lets you fetch your content from Sanity using code.

src/sanity/lib/image.ts

This file will take in a sanity image object, then extract the image URL that can be used to render an image inside your Next.js application.

Using Sanity to Fetch Data

To fetch data from Sanity, we need to understand the query language that is used; GROQ.

GROQ syntax took me only a few hours to fully understand, because Sanity have excellent docs to make this process easy.

Now that you understand basic GROQ, lets create a function to fetch our blog posts from sanity.

src/sanity/lib/blogs.ts

As you can see, we utilize the groq function to pass in a GROQ query that returns all our blog posts (using our boilerplate schema.tsx file).

Now lets render out these blogs by defining a React server component:

Now let's see the output when I create a blog using sanity studio.

Using the Sanity CLI

Configuring the Sanity CLI is simple, and you would need to do this if you want to test your sanity studio locally, and if you want to deploy it.

Here is a quick guide on how to configure the sanity CLI available on my website, which mentions the most important commands.

Conclusion

Sanity CMS is amazing, but with so many features, there comes complexity to use it with technologies such as Next.js.

I hope that I reduced this complexity for you, since I used to have trouble configuring sanity, and now I want to make the process smooth for everyone else.

If you want to make the process lightning fast, however, feel free to check out the sanity plugin on my website, which will scaffold all the necessary files for you instantly with a single CLI command:

https://www.nextinject.pro/plugins/backend/sanity

If you enjoyed this article, please make sure to Subscribe, Clap, Comment and Connect with me today! 🌐