Headless CMS & Jamstack — Web Development

Traditional Content Management Systems (like WordPress) tightly couple the backend database, the admin editor panel, and the frontend PHP templates into a single monolithic server. This makes scaling difficult, security a nightmare, and forces frontend developers to use dated templating languages. A Headless CMS decouples this entirely: it provides a backend for editors to manage content, and exposes that content via an API for developers to consume on any platform.

Module 1: The Jamstack Philosophy

Jamstack stands for JavaScript, APIs, and Markup. The core philosophy is to shift the heavy lifting to the Build phase. Instead of querying a database every time a user visits your homepage, a build server (like Vercel or GitHub Actions) queries the Headless CMS, generates static HTML files for every page, and deploys those files to a global CDN. The result is unmatched performance, infinite scalability, and immunity to database DDoS attacks.

Module 2: Scaffolding a Headless CMS (Sanity.io)

Sanity is a highly customizable, real-time Headless CMS. You define the shape of your content strictly through code.

# Initialize the Sanity Studio (The Editor Interface)
npm create sanity@latest corporate-blog-studio
cd corporate-blog-studio
npm run dev

Now we define the data schema for a Blog Post. This instantly generates the UI editors will use.

export default {
  name: 'post',
  title: 'Blog Post',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'Post Title',
      type: 'string',
      validation: Rule => Rule.required().max(100)
    },
    {
      name: 'slug',
      title: 'URL Slug',
      type: 'slug',
      options: { source: 'title', maxLength: 96 }
    },
    {
      name: 'body',
      title: 'Body Content',
      type: 'array', 
      of: [{ type: 'block' }] // Enables Portable Text (Rich text formatting)
    }
  ]
}

Module 3: Consuming the API in Next.js

On the frontend, we use the Sanity client to fetch the data. In Next.js App Router, we fetch this directly inside React Server Components.

import { createClient } from 'next-sanity';

export const client = createClient({
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || 'production',
  apiVersion: '2023-05-03',
  // Set to false if statically generating pages, true if fetching client-side
  useCdn: false,
});

import { client } from '../../../lib/sanity';
import { PortableText } from '@portabletext/react';

// Generate static HTML for this specific slug
export default async function BlogPost({ params }) {
  // Sanity uses GROQ (Graph-Relational Object Queries)
  const query = `*[_type == "post" && slug.current == $slug][0]`;
  const post = await client.fetch(query, { slug: params.slug });

  if (!post) {
    return <div>Post not found</div>;
  }

  return (
    <article className="prose lg:prose-xl mx-auto">
      <h1>{post.title}</h1>
      {/* Render the rich text array into semantic HTML */}
      <PortableText value={post.body} />
    </article>
  );
}

Module 4: Solving the Static Site Problem (ISR)

If the site is statically generated as HTML at build time, what happens when an editor publishes a new article? Do we have to rebuild a 10,000-page site? No. Next.js introduced Incremental Static Regeneration (ISR).

We can expose an API webhook in Next.js. We configure Sanity to hit this webhook whenever a document is published or deleted. Next.js then regenerates only that specific HTML file in the background.

import { revalidatePath } from 'next/cache';
import { headers } from 'next/headers';

export async function POST(request) {
  const signature = headers().get('sanity-webhook-signature');
  // Security: Verify the webhook actually came from Sanity using your secret token
  
  const body = await request.json();
  
  if (body._type === 'post' && body.slug) {
    // Tell Next.js to rebuild only this specific page
    revalidatePath(`/blog/${body.slug.current}`);
    return Response.json({ message: `Revalidated /blog/${body.slug.current}` });
  }
  
  return Response.json({ message: 'No action taken' });
}