How to Build a Headless WordPress Site with Next.js

1. Fetching Data with Server Components

By querying the WordPress REST API directly inside Next.js async components, you can retrieve content server-side without shipping large javascript libraries to the client browser.

export default async function BlogPage() {
  const res = await fetch('https://wp.api.com/wp-json/dk/v1/posts');
  const posts = await res.json();

  return (
    <div>
      {posts.map((post: any) => (
        <h2 key={post.id}>{post.title}</h2>
      ))}
    </div>
  );
}

2. Setting Up Dynamic Routing

Map WordPress post slugs directly to dynamic segments in the Next.js App Router using generateStaticParams. This pre-renders clean HTML pages during build, optimizing search engine indices.

3. On-Demand Cache Revalidation

Use WordPress save_post hooks to trigger Next.js revalidation webhooks. This updates the static cache on Vercel instantly whenever content editors modify a page inside wp-admin.

// Route handler: app/api/revalidate/route.ts
import { revalidateTag } from 'next/cache';
import { NextResponse } from 'next/server';

export async function POST(req: Request) {
  revalidateTag('posts');
  return NextResponse.json({ revalidated: true });
}