CMS Using NextJS + Sanity

Cover Image for NEXT.js

NEXT.js

Cover Image for NEXT.js

Next.js and Sanity are a powerful combination for building a modern, dynamic blog with fast performance, efficient content management, and scalability. Let’s break this down step by step. 1

What is Next.js?

Next.js is a React-based framework for building web applications. It provides:

  1. Server-Side Rendering (SSR): Pages are rendered on the server, providing better SEO and performance.
  2. Static Site Generation (SSG): Pre-render pages at build time for ultra-fast delivery.
  3. API Routes: Build backend APIs within the same application.
  4. Client-Side Rendering (CSR): Fetch data dynamically for parts of the application.
  5. Incremental Static Regeneration (ISR): Update static content on demand without rebuilding the entire site.

What is Sanity?

Sanity is a headless Content Management System (CMS) that provides:

  1. Content Studio: A customizable CMS interface for managing your blog content.
  2. GROQ (Graph-Relational Object Queries): A query language to fetch content from your Sanity dataset.
  3. API and Realtime Updates: A powerful API for fetching and updating content, with real-time preview capabilities.
  4. Flexible Schemas: Define your content types (e.g., blog posts, authors) with full flexibility.

Why Use Next.js with Sanity for a Blog?

  1. Dynamic and SEO-Friendly Blog:
    • Next.js handles SSR/SSG, making your blog fast and optimized for search engines.
  2. Headless CMS:
    • Sanity separates content from design, so you can update blog posts without redeploying the site.
  3. Scalability:
    • Sanity’s API scales with your needs, whether you have 10 or 10,000 blog posts.
  4. Real-Time Previews:
    • Preview drafts before publishing, ensuring quality content delivery.

Steps to Build a Blog with Next.js and Sanity

1. Set Up Sanity CMS

  • Install Sanity CLI and create a new project: npm install -g @sanity/cli sanity init
  • Define your blog schema (e.g., for posts, authors, categories): // schemas/post.js export default { name: 'post', type: 'document', title: 'Post', fields: [ { name: 'title', type: 'string', title: 'Title' }, { name: 'slug', type: 'slug', title: 'Slug', options: { source: 'title' } }, { name: 'body', type: 'array', title: 'Body', of: [{ type: 'block' }] }, { name: 'publishedAt', type: 'datetime', title: 'Published At' }, ], };

2. Set Up Next.js

  • Create a new Next.js project: npx create-next-app blog cd blog
  • Install Sanity client: npm install @sanity/client

3. Connect Sanity to Next.js

  • Configure Sanity client in lib/sanity.js: import { createClient } from '@sanity/client'; export const client = createClient({ projectId: 'your_project_id', dataset: 'production', useCdn: true, apiVersion: '2023-01-01', });

4. Fetch Blog Posts

  • Update pages/index.js: import { client } from '../lib/sanity'; export default function Home({ posts }) { return ( <div> <h1>My Blog</h1> <ul> {posts.map((post) => ( <li key={post._id}> <a href={`/post/${post.slug.current}`}>{post.title}</a> </li> ))} </ul> </div> ); } export async function getStaticProps() { const query = `*[_type == "post"] | order(publishedAt desc) { _id, title, slug }`; const posts = await client.fetch(query); return { props: { posts } }; }

5. Dynamic Blog Post Pages

  • Create pages/post/[slug].js for individual posts: import { client } from '../../lib/sanity'; export default function Post({ post }) { return ( <article> <h1>{post.title}</h1> <div>{post.body}</div> </article> ); } export async function getStaticPaths() { const query = `*[_type == "post"] { slug }`; const posts = await client.fetch(query); const paths = posts.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 } }; }

6. Styling

  • Use CSS or a library like Tailwind CSS for styling your blog.

7. Deploy

Benefits for Blogging

  1. Content Flexibility: Writers and editors can focus on creating content in Sanity Studio.
  2. Performance: Next.js ensures fast page loads with SSG and caching.
  3. SEO: SSR and static pages improve discoverability.
  4. Scalable Architecture: Easily add features like categories, tags, or authors.

Let me know if you'd like further assistance setting up or customizing!

More Stories