wordpress-headless-expert

WordPress Headless Expert (2026 Edition)

English | Bahasa Indonesia

---

English

Orchestration & Integration

• headless-cms-expert: Comparing and migrating between CMS backends.
• nextjs-app-router-expert: Next.js App Router integration with WPGraphQL.
• astro-framework-expert: Static site generation and content pipelines from WordPress.
• seo: Syncing Yoast SEO / Rank Math metadata to modern frontend head tags.
• performance-web-vitals: Caching and Edge SSR optimization for decoupled WordPress.

Description

Production guide for architecting, deploying, and maintaining headless WordPress systems. Covers decoupled WordPress backends with WPGraphQL and Advanced Custom Fields (ACF Pro), frontend rendering with Next.js 15 or Astro 5, Faust.js framework integration, webhook-triggered on-demand revalidation, authentication (JWT / Application Passwords), and WooCommerce headless setups.

Trigger Conditions

• Decoupling an existing WordPress site into a headless architecture with Next.js/Astro.
• Querying WordPress content using WPGraphQL and ACF Pro field groups.
• Synchronizing SEO metadata (Yoast / RankMath) with modern frontend metadata APIs.
• Setting up on-demand ISR revalidation hooks from WordPress publish events.

---

Core Architecture & Patterns

1. WPGraphQL Query Integration (Next.js 15 Server Component)

const WP_GRAPHQL_ENDPOINT = process.env.WORDPRESS_API_URL || 'https://cms.example.com/graphql';

interface PostPreview {
  id: string;
  title: string;
  slug: string;
  date: string;
  excerpt: string;
  featuredImage?: {
    node: {
      sourceUrl: string;
      altText: string;
    };
  };
}

export async function fetchWordPressPosts(): Promise<PostPreview[]> {
  const query = `
    query GetLatestPosts {
      posts(first: 10, where: { orderby: { field: DATE, order: DESC } }) {
        nodes {
          id
          title
          slug
          date
          excerpt
          featuredImage {
            node {
              sourceUrl
              altText
            }
          }
        }
      }
    }
  `;

  const res = await fetch(WP_GRAPHQL_ENDPOINT, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ query }),
    next: { tags: ['wordpress:posts'], revalidate: 3600 },
  });

  const { data } = await res.json();
  return data?.posts?.nodes ?? [];
}