Preview Mode Implementation in Headless WordPress

// ============================================================================
// PART 1: Next.js 16 Draft Activation Route Handler (app/api/draft/route.ts)
// ============================================================================

import { draftMode } from 'next/headers';
import { redirect } from 'next/navigation';
import { NextRequest, NextResponse } from 'next/server';
import crypto from 'node:crypto';

/**
* Validates relative path redirection to neutralize Open Redirect attacks.
*/
function sanitizeRedirect(path: string | null): string {
if (!path || !path.startsWith('/') || path.startsWith('//') || path.includes(':')) {
  return '/';
}
return path;
}

export async function GET(request: NextRequest): Promise<NextResponse | void> {
const { searchParams } = new URL(request.url);
const secret = searchParams.get('secret');
const slug = searchParams.get('slug');
const id = searchParams.get('id');

const configuredSecret = process.env.WORDPRESS_PREVIEW_SECRET;

if (!configuredSecret || !secret) {
  return NextResponse.json({ message: 'Invalid preview token' }, { status: 401 });
}

// Timing-safe secret comparison
const secretBuffer = Buffer.from(secret, 'utf8');
const expectedBuffer = Buffer.from(configuredSecret, 'utf8');

if (
  secretBuffer.length !== expectedBuffer.length ||
  !crypto.timingSafeEqual(secretBuffer, expectedBuffer)
) {
  return NextResponse.json({ message: 'Unauthorized preview access' }, { status: 401 });
}

// 1. Enable Draft Mode (sets __prerender_bypass cookie)
const draft = await draftMode();
draft.enable();

// 2. Safely redirect to target post path
const redirectPath = slug ? `/blog/${slug}` : (id ? `/blog/?p=${id}` : '/');
redirect(sanitizeRedirect(redirectPath));
}

// ============================================================================
// PART 2: Next.js 16 Disable Route Handler (app/api/disable-draft/route.ts)
// ============================================================================

export async function GET(request: NextRequest): Promise<NextResponse | void> {
const { searchParams } = new URL(request.url);
const redirectUrl = sanitizeRedirect(searchParams.get('redirect'));

// Disable Draft Mode (clears __prerender_bypass cookie)
const draft = await draftMode();
draft.disable();

redirect(redirectUrl);
}

// ============================================================================
// PART 3: Sticky Preview Banner RSC (components/PreviewBanner.tsx)
// ============================================================================

export async function PreviewBanner({ currentPath }: { currentPath: string }) {
const { isEnabled } = await draftMode();

if (!isEnabled) {
  return null;
}

return (
  <aside className="sticky top-0 z-50 flex items-center justify-between bg-accent-amber/90 px-4 py-2 text-xs font-semibold text-black backdrop-blur-md shadow-md">
    <div className="flex items-center gap-2">
      <span className="h-2 w-2 rounded-full bg-red-600 animate-pulse" />
      <span>Warning: Preview Mode Active (displaying unpublished revisions)</span>
    </div>
    <a
      href={`/api/disable-draft?redirect=${encodeURIComponent(currentPath)}`}
      className="rounded bg-black px-3 py-1 text-white hover:bg-neutral-800 transition-colors"
    >
      Exit Preview
    </a>
  </aside>
);
}

// ============================================================================
// PART 4: WordPress Preview Filter (wp-content/mu-plugins/agentic-preview.php)
// ============================================================================
/*
<?php
declare(strict_types=1);

namespace AgenticLab\Integration;

final class AgenticPreviewLinkFilter {
  private const string FRONTEND_DRAFT_URL = 'https://frontend.agenticlab.com/api/draft';

  public static function init(): void {
      add_filter('preview_post_link', [self::class, 'filter_preview_link'], 10, 2);
  }

  public static function filter_preview_link(string $link, \WP_Post $post): string {
      $secret = defined('WORDPRESS_PREVIEW_SECRET') ? WORDPRESS_PREVIEW_SECRET : '';
      if (empty($secret)) {
          return $link;
      }

      return add_query_arg([
          'secret' => $secret,
          'id'     => $post->ID,
          'slug'   => $post->post_name ?: 'draft-' . $post->ID,
      ], self::FRONTEND_DRAFT_URL);
  }
}

add_action('init', [AgenticPreviewLinkFilter::class, 'init']);
*/