Creating a Personal Blog with Next.js and Sanity: Setting up Sanity

Published September 02, 2024 (10 months ago) 2 min read

What is Sanity?

Sanity is a headless CMS (Content Management System). If you're unfamiliar with CMS, it's an application that lets users create and modify website content without extensive technical knowledge. This is particularly useful for content-driven sites like blogs, where we want users to create content without them having a knowledge about the codebase. Some key features of a CMS include:

SEO Optimization — allows users to modify site metadata to improve search engine rankings.
Content scheduling — enables users to set publication dates for content.
Version control — tracks previous versions of content.
Media management — organizes and reuses assets (images, videos, and other files) across content.

Sanity is "headless" in a way that it acts as a backend for your site. It provides an interface to create, manage, and modify content while remaining independent of your chosen frontend technology or framework. This differs from traditional CMS platforms, where the backend and frontend are tightly coupled.

Prerequisites

Now that we've covered the basics, let's start building. This guide assumes you have knowledge of the following:

Next.js (App router and Server actions)
TypeScript
React
TailwindCSS

Initializing Sanity Inside a Next.js Project

First, create a new Next.js project. You can refer to their documentation, or if you want to set up a formatter, linter, and pre-commit hooks, check out my previous blog on how to set up Prettier, ESLint, Lint-staged, and Husky on a Next.js project.

Once you've done that, add Sanity to your project by running:

1npx sanity@latest init

If you don't have a Sanity account yet, you'll be prompted to create one.
With an account, you'll be prompted to create a new project.
When asked for the dataset, choose the default "Production."
Select Yes when asked to add configuration files for a Sanity project in the current Next.js project.
Select Yes when asked to use TypeScript.
Select Yes when asked for an embedded Sanity studio.
Choose the default route for the studio: /studio
Select the Blog template when asked which template to use.
Select Yes when asked to add the project ID and dataset to your .env file.

Once done, run your local development server using npm run dev (or the equivalent command for your package manager) and open your Sanity studio at http://localhost:3000/studio. If it's your first time, you'll likely be asked to add http://localhost:3000 to your Sanity account's list of allowed origins. Follow the prompts to add your localhost to Sanity and log in if asked.

Voilà! You now have a fully functioning CMS for your blogs.

Adding content

Adding content is pretty straightforward. Here's an example:

What’s Next?

In the next blog post, I'll show you how to display the list of blogs you've created on your website.

Creating a personal blog with Next.js and Sanity: Fetching and Displaying the blogs