Preview Mode: Let Editors See Drafts Before Publishing

One of the biggest challenges with headless WordPress is preview functionality. Editors want to see their drafts before publishing, but your static site only shows published content.

FlatWP’s preview mode solves this elegantly.

How It Works

When an editor clicks “Preview” in WordPress, our plugin generates a special URL:

https://flatwp.com/api/preview?secret=xyz&id=123&type=post

This hits your Next.js preview API route, which:

1. Verifies the secret token
2. Enables Next.js draft mode via cookies
3. Redirects to the post URL

Now when Next.js renders the page, it queries WordPress for draft content instead of published content.

The Implementation

Your preview API route:

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const secret = searchParams.get('secret');
  const id = searchParams.get('id');

  // Verify secret
  if (secret !== process.env.PREVIEW_SECRET) {
    return new Response('Invalid token', { status: 401 });
  }

  // Enable draft mode
  draftMode().enable();

  // Redirect to the post
  redirect(`/blog/${slug}`);
}

Then in your page component:

export default async function Post({ params }) {
  const { isEnabled } = draftMode();
  
  // Fetch draft if preview mode is enabled
  const post = await fetchPost(params.slug, {
    preview: isEnabled
  });
  
  return <PostTemplate post={post} />;
}

The WordPress Side

Our plugin adds a “Preview on Frontend” button to the WordPress editor that generates the preview URL automatically.

It also handles authentication – only logged-in WordPress users can generate preview links, keeping your drafts secure.

Exit Preview

We add a banner to preview pages:

{draftMode().isEnabled && (
  <div className="bg-yellow-100 p-4">
    <p>You are viewing a preview.</p>
    <a href="/api/exit-preview">Exit Preview</a>
  </div>
)}

The exit route simply clears the draft mode cookie.

Why This Matters

Without preview mode, editors have to publish content to see how it looks. This breaks their workflow and risks publishing unfinished work.

With FlatWP’s preview mode, editors can iterate on drafts, share preview links with teammates, and only publish when ready.

It’s a small feature that makes a huge difference in adoption.