Tutorial: Make a blog with Next.js, React, and Sanity

Written by Knut Melvær, Hidde de Vries

Sometimes you just need a blog. While there are loads of dedicated blogging platforms, there might be good reasons for having your blog content live along with your other content. Be it documentation (as in our case), products, a portfolio, or what have you. The content model, or the data schema, for a blog, is also an easy place to get started with making something headless with Sanity and a detached frontend.

In this tutorial, we'll make a blog with Sanity as the content backend and the React-based framework Next.js for rendering web pages.

If you don't feel like typing all the below, you can also:

0. Create a project folder and a monorepo

In this project, you will have two separate web apps:

1. Sanity Studio – a React app that connects to the hosted API with all your blog content
2. The blog frontend - a website built with Next.js

It can be useful to keep these codebases in the same folder and git repository (but you don't have to), so you'd have a studio folder and a frontend folder.

You can also place .gitignore, .editorconfig, or other config files in the root, as well as a README.md. If you want to track the project with git, run the command git init in the root folder in your terminal (or add the folder to your Git GUI tool of choice).

1. Install Sanity and the preconfigured blog schemas

We'll start by setting up the Sanity Studio using node package manager (how to install npm). To set up, run: