Building a CMS-Driven Blog Using Sanity.io and Next.js

Building a CMS-Driven Blog Using Sanity.io and Next.js

Content is king , but managing content should never slow down development. That’s where headless CMSs like Sanity.io come in. When paired with a frontend framework like Next.js, Sanity allows developers to create lightning-fast, content-rich applications with full control over structure, design, and performance.

This guide walks through setting up a blog using Sanity as the backend for content management, and Next.js to render the frontend. The result is a fast, flexible blog that empowers content creators while keeping the developer experience smooth and scalable.

Why Use Sanity.io?

Sanity.io is a real-time, schema-driven headless CMS with a rich set of features:

• Custom content types defined in code
• Portable Text for flexible rich content blocks
• GROQ (Sanity’s query language) for precise data fetching
• Real-time collaboration and live previews
• Powerful API with GraphQL and REST support

It provides a sleek, React-based Studio for managing content and integrates easily with frontend frameworks via APIs.

Why Pair It with Next.js?

Next.js is a natural fit for CMS-based sites due to its:

• File-based routing
• Static site generation (SSG) and server-side rendering (SSR)
• Image optimization
• API routes for dynamic features
• Fast performance and SEO benefits

Together, Sanity and Next.js create a powerful, scalable stack for modern content websites.

Step-by-Step: Build Your CMS Blog

1. Set Up Sanity

Install the Sanity CLI:

npm install -g @sanity/cli

Create a new Sanity project:

sanity init

Choose the blog template or create a custom schema. This sets up:

• post.js: A schema for blog posts
• author.js: A schema for authors
• A hosted Sanity Studio for editing content

Once created, deploy the studio:

sanity deploy

This gives you a hosted CMS for managing content.

2. Create a Next.js App

In a new directory:

npx create-next-app my-blog
cd my-blog

Install the Sanity client:

npm install @sanity/client

Create a file sanity.js in the root:

import sanityClient from '@sanity/client';

export default sanityClient({
projectId: 'your_project_id',
dataset: 'production',
useCdn: true
});

Replace 'your_project_id' with the one from your Sanity dashboard.

3. Fetch Posts from Sanity

Inside a page (e.g., pages/index.js):

import client from '../sanity';

export async function getStaticProps() {
const query = `*[_type == "post"]{
title,
slug,
mainImage {
asset -> {
_id,
url
}
},
body
}`;

const posts = await client.fetch(query);

return {
props: { posts }
};
}

Then, render the posts in your component:

export default function Home({ posts }) {
return (
<div>
<h1>My Blog</h1>
{posts.map(post => (
<div key={post.slug.current}>
<h2>{post.title}</h2>
<img src={post.mainImage.asset.url} alt={post.title} />
</div>
))}
</div>
);
}

4. Add Dynamic Routes for Blog Posts

Create a file pages/posts/[slug].js:

import client from '../../sanity';

export async function getStaticPaths() {
const slugs = await client.fetch(`*[_type == "post"]{ slug }`);
const paths = slugs.map(post => ({
params: { slug: post.slug.current }
}));

return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
const query = `*[_type == "post" && slug.current == $slug][0]`;
const post = await client.fetch(query, { slug: params.slug });

return { props: { post } };
}

export default function Post({ post }) {
return (
<article>
<h1>{post.title}</h1>
{/* Add PortableText rendering for body here */}
</article>
);
}

Use @portabletext/react to render rich text fields like body.

Enhancements and Best Practices

• Preview mode: Enable real-time content previews with Next.js API routes
• SEO: Add metadata using next/head
• Responsive images: Integrate with next/image for optimized media
• Category filtering: Add schemas and filters for blog categories
• Deploy to Vercel: One-click deploy your blog for speed and scalability

Conclusion

Building a blog with Sanity.io and Next.js gives you the best of both worlds: a structured, powerful CMS for content creators and a modern, performant frontend for users. This stack is ideal for developers who want flexibility, custom design control, and the ability to scale as content grows.

With this foundation, you can go far beyond blogging , into full-fledged content platforms, portfolios, and dynamic publishing tools.

Disclaimer

Article written with the help of AI.

Read the full Disclaimer HERE