Headless WordPress with Next.js: Decoupled CMS Architecture

In traditional WordPress architecture, the system is monolithic — the PHP engine queries the MySQL database, processes template hierarchy files, and renders the final HTML on the exact same server. While simple and mature, monolithic architectures carry drawbacks: server CPU load during viral traffic surges, potential database security exposure, and rigid PHP frontend rendering. Headless WordPress (Decoupled CMS) breaks this coupling: WordPress operates strictly as a backend content editing API, while a modern Next.js / React application serves the public frontend.

Monolithic WordPress vs. Headless Decoupled WordPress

Next.js Data Fetching via Incremental Static Regeneration (ISR)

The breakthrough feature that makes Next.js the ultimate frontend for WordPress is Incremental Static Regeneration (ISR). Rather than dynamically executing PHP on every visitor hit, Next.js generates static HTML pages at build time. When an editor updates an article in WordPress, Next.js re-generates only that specific page in the background in milliseconds!

// Next.js (App Router: app/blog/[slug]/page.jsx)
export async function generateStaticParams() {
    // 1. Fetch all published slugs from WordPress REST API at build time
    const res = await fetch('https://api.veewom.com/wp-json/wp/v2/posts?_fields=slug');
    const posts = await res.json();
    return posts.map((post) => ({ slug: post.slug }));
}

export default async function BlogPostPage({ params }) {
    const { slug } = params;
    
    // 2. Fetch specific post data with ISR revalidation every 60 seconds
    const res = await fetch(
        `https://api.veewom.com/wp-json/wp/v2/posts?slug=${slug}`,
        { next: { revalidate: 60 } } 
    );
    const [post] = await res.json();

    if (!post) return <div>Article not found.</div>;

    return (
        <article className="max-w-4xl mx-auto py-12 px-4">
            <h1 className="text-4xl font-extrabold text-orange-600 mb-4">
                {post.title.rendered}
            </h1>
            <div 
                className="prose lg:prose-xl"
                dangerouslySetInnerHTML={{ __html: post.content.rendered }} 
            />
        </article>
    );
}

WPGraphQL: The Superior Alternative to REST API

While the standard REST API is excellent, it suffers from two known issues: over-fetching (returning 50 fields when you only need the title) and under-fetching (requiring multiple round-trips to get post author and featured image). By installing the free WPGraphQL plugin, your frontend can request exactly what it needs in a single query:

# GraphQL Query to fetch only Title and Author Name
query GetPostBySlug {
  post(id: "learn-wordpress", idType: SLUG) {
    title
    date
    author {
      node {
        name
        avatar { url }
      }
    }
  }
}