WP REST API Integration with Frontend (React/Vue/Next.js)

Integrating WP REST API with Frontend (React/Vue/Next.js)

WordPress as headless CMS is a working approach for projects needing non-standard frontend: SPA, mobile app, static site with dynamic data. WP REST API serves data; React/Vue/Next.js renders the interface. Developing headless integration from plain Next.js to production takes 5 to 15 working days depending on content volume and routing complexity.

Basic Integration: Fetching Data

WordPress REST API is available at /wp-json/wp/v2/ by default. Fetching recent posts:

const WP_API_URL = process.env.NEXT_PUBLIC_WP_URL + '/wp-json/wp/v2';

export interface WPPost {
  id: number;
  slug: string;
  title: { rendered: string };
  content: { rendered: string };
  excerpt: { rendered: string };
  date: string;
  featured_media: number;
}

export async function getPosts(params: {
  perPage?: number;
  page?: number;
  category?: number;
  search?: string;
} = {}): Promise<{ posts: WPPost[]; total: number; totalPages: number }> {
  const qs = new URLSearchParams({
    per_page: String(params.perPage ?? 12),
    page:     String(params.page ?? 1),
    _embed:   'wp:featuredmedia,wp:term',
    ...(params.category && { categories: String(params.category) }),
    ...(params.search   && { search: params.search }),
  });

  const res = await fetch(`${WP_API_URL}/posts?${qs}`, {
    next: { revalidate: 60 },
  });

  if (!res.ok) throw new Error(`WP API error: ${res.status}`);

  return {
    posts:      await res.json(),
    total:      Number(res.headers.get('X-WP-Total')),
    totalPages: Number(res.headers.get('X-WP-TotalPages')),
  };
}

export async function getPostBySlug(slug: string): Promise<WPPost | null> {
  const res = await fetch(`${WP_API_URL}/posts?slug=${slug}&_embed=wp:featuredmedia,wp:term`);
  const posts = await res.json();
  return posts.length ? posts[0] : null;
}

Next.js App Router: Dynamic Routes

export async function generateStaticParams() {
  const { posts } = await getPosts({ perPage: 100 });
  return posts.map(post => ({ slug: post.slug }));
}

export async function generateMetadata({ params }: { params: { slug: string } }) {
  const post = await getPostBySlug(params.slug);
  if (!post) return {};
  return {
    title:       post.title.rendered,
    description: post.excerpt.rendered.replace(/<[^>]+>/g, '').slice(0, 160),
  };
}

export default async function PostPage({ params }: { params: { slug: string } }) {
  const post = await getPostBySlug(params.slug);
  if (!post) notFound();

  return (
    <article className="post-single">
      <h1 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
      <div
        className="post-content"
        dangerouslySetInnerHTML={{ __html: post.content.rendered }}
      />
    </article>
  );
}

React SPA Custom Hook

import useSWR from 'swr';

const fetcher = (url: string) => fetch(url).then(r => r.json());

export function usePosts(category?: string, page = 1) {
  const params = new URLSearchParams({ per_page: '12', page: String(page), _embed: '1' });
  if (category) params.set('categories', category);

  const { data, error, isLoading } = useSWR<WPPost[]>(
    `/wp-json/wp/v2/posts?${params}`,
    fetcher,
    { revalidateOnFocus: false }
  );

  return { posts: data ?? [], isLoading, error };
}

GraphQL via WPGraphQL

WPGraphQL plugin adds GraphQL endpoint. For complex pages with nested data, GraphQL is better than REST: one query instead of many:

query GetProjectWithRelated($slug: String!) {
  projectBy(slug: $slug) {
    id
    title
    content
    featuredImage {
      node { sourceUrl altText }
    }
  }
}

On-demand ISR on WordPress Publish

Next.js supports on-demand revalidation—rebuild pages when CMS data changes:

add_action('save_post', function (int $post_id, WP_Post $post): void {
    if ($post->post_status !== 'publish') return;

    $next_url = get_option('nextjs_revalidate_url');
    $secret   = get_option('nextjs_revalidate_secret');

    if (!$next_url || !$secret) return;

    wp_remote_post("{$next_url}/api/revalidate", [
        'body'    => json_encode([
            'secret' => $secret,
            'path'   => '/' . $post->post_type . '/' . $post->post_name,
        ]),
        'headers' => ['Content-Type' => 'application/json'],
        'blocking'=> false,
    ]);
}, 10, 2);

export async function POST(req: Request) {
  const { secret, path } = await req.json();

  if (secret !== process.env.REVALIDATE_SECRET) {
    return Response.json({ error: 'Invalid secret' }, { status: 401 });
  }

  revalidatePath(path);
  return Response.json({ revalidated: true, path });
}

CORS for Headless

WordPress and Next.js on different domains need CORS:

add_action('rest_api_init', function () {
    remove_filter('rest_pre_serve_request', 'rest_send_cors_headers');
    add_filter('rest_pre_serve_request', function ($value) {
        $origin = $_SERVER['HTTP_ORIGIN'] ?? '';
        $allowed = ['https://mysite.com', 'http://localhost:3000'];
        if (in_array($origin, $allowed)) {
            header('Access-Control-Allow-Origin: ' . $origin);
            header('Access-Control-Allow-Credentials: true');
            header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
            header('Access-Control-Allow-Headers: Authorization, Content-Type');
        }
        return $value;
    });
});

Performance: What to Cache

Headless WordPress is an architectural choice, not just plugin setup. Frontend development, WordPress setup, and deploying two independent apps is substantial work to budget upfront.