Next.js and Headless WordPress Integration

import React from 'react';
import Image from 'next/image';
import Link from 'next/link';
import parse, { DOMNode, Element, domToReact } from 'html-react-parser';
import { z } from 'zod';

/**
* Zod validation schema for WordPress post.
* Protects runtime execution against corrupted API payloads.
*/
export const WpPostSchema = z.object({
id: z.number(),
slug: z.string(),
date: z.string(),
title: z.object({
  rendered: z.string(),
}),
content: z.object({
  rendered: z.string(),
}),
excerpt: z.object({
  rendered: z.string(),
}),
featured_media: z.number().default(0),
_embedded: z.record(z.string(), z.unknown()).optional(),
});

export type WpPost = z.infer<typeof WpPostSchema>;

interface FetchOptions extends RequestInit {
revalidateTags?: string[];
revalidateTime?: number | false;
}

/**
* Resilient typed client for WP REST API.
* Features exponential backoff and Zod runtime schema validation.
*/
export class WpApiClient {
private baseUrl: string;

constructor(baseUrl?: string) {
  this.baseUrl = baseUrl || process.env.WORDPRESS_INTERNAL_API_URL || 'https://cms.agenticlab.com/wp-json';
}

public async getPostBySlug(slug: string): Promise<WpPost | null> {
  const endpoint = `/wp/v2/posts?slug=${encodeURIComponent(slug)}&_embed=true`;
  const data = await this.fetchWithRetry<unknown[]>(endpoint, {
    revalidateTags: ['posts', `post:${slug}`],
  });

  if (!Array.isArray(data) || data.length === 0) {
    return null;
  }

  const validated = WpPostSchema.safeParse(data[0]);
  if (!validated.success) {
    console.error('[WpApiClient] Schema validation error:', validated.error.format());
    throw new Error(`Invalid API response format for post ${slug}`);
  }

  return validated.data;
}

private async fetchWithRetry<T>(endpoint: string, options: FetchOptions = {}, retries = 2): Promise<T> {
  const url = `${this.baseUrl}${endpoint}`;
  const headers = new Headers(options.headers);
  headers.set('Accept', 'application/json');

  // M2M authentication via shared secret
  if (process.env.WORDPRESS_M2M_SECRET) {
    headers.set('X-Agentic-M2M-Secret', process.env.WORDPRESS_M2M_SECRET);
  }

  const nextConfig: { tags?: string[]; revalidate?: number | false } = {};
  if (options.revalidateTags) {
    nextConfig.tags = options.revalidateTags;
  }
  if (options.revalidateTime !== undefined) {
    nextConfig.revalidate = options.revalidateTime;
  }

  for (let attempt = 0; attempt <= retries; attempt++) {
    try {
      const response = await fetch(url, {
        ...options,
        headers,
        next: nextConfig,
      });

      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }

      return (await response.json()) as T;
    } catch (error) {
      if (attempt === retries) {
        throw error;
      }
      // Exponential backoff: 200ms, 400ms...
      await new Promise((resolve) => setTimeout(resolve, Math.pow(2, attempt) * 200));
    }
  }

  throw new Error('Unreachable fetch failure');
}
}

/**
* Props for safe content rendering component.
*/
interface WpContentRendererProps {
html: string;
allowedOrigins?: string[];
}

/**
* High-performance AST parser for WordPress HTML content.
* Automatically transforms <img> to next/image and <a> to next/link.
*/
export const WpContentRenderer: React.FC<WpContentRendererProps> = ({
html,
allowedOrigins = ['https://cms.agenticlab.com'],
}) => {
const options = {
  replace: (domNode: DOMNode) => {
    if (!(domNode instanceof Element)) {
      return;
    }

    // 1. Optimize <img> tags with next/image
    if (domNode.name === 'img') {
      const { src, alt, width, height, class: className } = domNode.attribs;

      if (!src) {
        return null;
      }

      const isAllowedOrigin = allowedOrigins.some((origin) => src.startsWith(origin));
      const numWidth = width ? parseInt(width, 10) : 800;
      const numHeight = height ? parseInt(height, 10) : 500;

      return (
        <Image
          src={src}
          alt={alt || 'WordPress Post Asset'}
          width={isNaN(numWidth) ? 800 : numWidth}
          height={isNaN(numHeight) ? 500 : numHeight}
          className={className || 'rounded-lg object-cover my-6'}
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 75vw, 60vw"
          unoptimized={!isAllowedOrigin}
        />
      );
    }

    // 2. Transform internal <a> links to next/link
    if (domNode.name === 'a') {
      const { href, class: className, target, rel } = domNode.attribs;

      if (!href) {
        return;
      }

      const isInternal = href.startsWith('/') || allowedOrigins.some((origin) => href.startsWith(origin));

      if (isInternal) {
        // Normalize absolute URL to relative path
        let internalHref = href;
        for (const origin of allowedOrigins) {
          internalHref = internalHref.replace(origin, '');
        }
        if (internalHref === '') {
          internalHref = '/';
        }

        return (
          <Link
            href={internalHref}
            className={className || 'text-accent-cyan hover:underline transition-colors'}
            prefetch={false}
          >
            {domToReact(domNode.children as DOMNode[], options)}
          </Link>
        );
      }

      // External links: security rel attributes
      return (
        <a
          href={href}
          target={target || '_blank'}
          rel={rel || 'noopener noreferrer'}
          className={className || 'text-accent-violet hover:underline'}
        >
          {domToReact(domNode.children as DOMNode[], options)}
        </a>
      );
    }
  },
};

return <div className="prose prose-invert max-w-none">{parse(html, options)}</div>;
};