Building a Modern Blog with Next.js and Sanity: A Step-by-Step Guide

In today's fast-paced digital landscape, a blog is more than just a place to share thoughts—it's a dynamic platform for content delivery, audience engagement, and building an online presence. While many traditional blogging solutions exist, modern web development offers a powerful stack that combines performance, flexibility, and a superb developer experience.

This guide will walk you through building a blazing-fast, SEO-friendly, and highly maintainable blog using Next.js for the frontend and Sanity as your content management system (CMS). Whether you're a seasoned developer or just starting, this tutorial will equip you with the knowledge to create a modern blog that stands out.

Why Next.js and Sanity?

• Next.js: A React framework that enables powerful features like server-side rendering (SSR), static site generation (SSG), and API routes out-of-the-box. This translates to incredibly fast load times, excellent SEO, and a robust development environment.
• Sanity: A headless CMS that gives you complete control over your content. Instead of being tied to a specific frontend, Sanity lets you define your content schema, manage your data with a user-friendly studio, and deliver content via a powerful API. This flexibility makes it perfect for a Next.js frontend.

Together, Next.js and Sanity form a "JAMstack" powerhouse, offering unparalleled performance, scalability, and a smooth workflow for content creators and developers alike.

1. Setting Up Your Next.js Project

Let's start by initializing our Next.js application. Open your terminal and run the following command:

npx create-next-app my-blog --ts

This command will create a new Next.js project named my-blog with TypeScript support. Once finished, navigate into your new project directory:

cd my-blog

You can now run your Next.js development server to see the default starter page:

npm run dev
# or
yarn dev

Open your browser to http://localhost:3000, and you should see the Next.js welcome page.

2. Setting Up Your Sanity Project and Studio

Next, we'll set up Sanity. If you haven't already, install the Sanity CLI globally:

npm install -g @sanity/cli

Now, from your my-blog directory, initialize a new Sanity project and studio:

sanity init

The CLI will prompt you to log in or create an account. Follow the instructions. You'll then be asked to:

1. Select a project: Choose to create a new project.
2. Project name: Enter a name like my-blog-sanity.
3. Dataset configuration: Accept the default production dataset.
4. Schema template: Choose the "Blog (schema)" template. This provides a good starting point with pre-defined schemas for posts, authors, and categories.

Sanity will then download and configure your studio. Once complete, navigate into your Sanity studio directory:

cd studio

And start the Sanity studio development server:

sanity start

Open your browser to http://localhost:3333 (or the port Sanity indicates), and you should see your Sanity Studio dashboard. This is where you'll manage all your blog content.

3. Defining Your Content Schema (Optional Refinement)

If you notice several folders on the left side of the Content column in the previous image, those are documents that we created using the defined schema. The "Blog (schema)" template from Sanity gives you a good foundation. However, you can always customize and extend your schemas in the studio/schemas directory.

For example, open studio/schemas/post.js. You might want to add a field for a 'main image' or a 'reading time' calculation.

Here's a simplified example of what post.js might look like with a main image:

// studio/schemas/post.js
export default {
  name: 'post',
  title: 'Post',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string',
    },
    {
      name: 'slug',
      title: 'Slug',
      type: 'slug',
      options: {
        source: 'title',
        maxLength: 96,
      },
    },
    {
      name: 'mainImage',
      title: 'Main image',
      type: 'image',
      options: {
        hotspot: true,
      },
    },
    {
      name: 'publishedAt',
      title: 'Published at',
      type: 'datetime',
    },
    {
      name: 'body',
      title: 'Body',
      type: 'blockContent',
    },
    // ... other fields like authors, categories
  ],
};

After modifying your schema, restart your Sanity studio. Now, go to your Sanity Studio (http://localhost:3333) and create a few sample blog posts with titles, slugs, and some content. Make sure to upload a mainImage for each post if you added that field.

After you create blog content in Sanity Studio, don't forget to press the publish button. Next, you can use the frontend to display your blog content. Hopefully, this tutorial can help or provide new insights for you. Thank you for reading 🙌🏿😊.

Reference

https://www.sanity.io/docs