Integrating Sanity CMS with Next.js for Blogs

In today’s fast-paced web development world, using a headless CMS gives you flexibility, scalability, and complete control over your content structure. Sanity.io is one of the most developer-friendly CMS platforms, and pairing it with Next.js makes building blogs and dynamic sites a smooth experience.

In this post, I’ll walk you through how I integrated Sanity with Next.js to create a dynamic blog for my portfolio.

Why Sanity + Next.js?

Sanity CMS provides real-time content editing, flexible schemas, and a powerful query language (GROQ).
Next.js enables server-side rendering (SSR), static site generation (SSG), and a great developer experience for React projects.
Together, they make content-rich websites fast and fully customizable.

Step 1: Setting Up Sanity

Install Sanity CLI

javascript code

npm install -g @sanity/cli

Initialize Sanity Project

shell code

sanity init

Choose Blog (schema) when prompted.
Follow the steps to link or create a Sanity project.
This creates a /studio folder with schemas for posts, authors, and more.

Start Sanity Studio Locally

shell code

cd studio
sanity dev

Now you have a running CMS where you can add blog posts and content.

Step 2: Connecting Next.js to Sanity

Install Dependencies

shell code

npm install @sanity/client @portabletext/react

Create Sanity Client in Next.js

typescript code

// lib/sanityClient.ts
import sanityClient from '@sanity/client'

typescript code

export const client = sanityClient({
  projectId: 'your_project_id',   // Found in sanity.json or project dashboard
  dataset: 'production',
  useCdn: true,
  apiVersion: '2023-01-01',       // Use current date
})

Step 3: Fetching Blog Posts with GROQ

typescript code

// lib/queries.ts
export const postsQuery = `*[_type == "post"]{
  _id,
  title,
  slug,
  mainImage,
  body,
  publishedAt
} | order(publishedAt desc)`


// pages/blog.tsx
import { client } from '@/lib/sanityClient'
import { postsQuery } from '@/lib/queries'

export async function getStaticProps() {
  const posts = await client.fetch(postsQuery)
  return { props: { posts } }
}

Step 4: Rendering Content with Portable Text

typescript code

import { PortableText } from '@portabletext/react'

const BlogPost = ({ post }) => (
  <article>
    <h1>{post.title}</h1>
    <PortableText value={post.body} />
  </article>
)

Step 5: Deploying

Sanity Studio → Deploy using:

shell code

sanity deploy

Next.js App → Deploy to Vercel for seamless integration.

Conclusion

Integrating Sanity CMS with Next.js makes managing blog content effortless while keeping the frontend flexible and performant. Whether you’re building a personal blog, a client project, or a full content-driven app, this stack is a powerful combination.

Want to see this live? Check out my portfolio or get in touch .

Let me know if you want a codebase starter or help writing the next post in this series!