Draft Mode & Editorial Preview

// src/app/preview/page.tsx
export const dynamic = "force-dynamic";  // never statically generate this page

import { getClient, type PreviewParams } from "@optimizely/cms-sdk";
import { OptimizelyComponent, withAppContext } from "@optimizely/cms-sdk/react/server";
import { NextPreviewComponent } from "@optimizely/cms-sdk/react/nextjs";

async function PreviewPage({ searchParams }) {
  const params = await searchParams;
  const client = getClient();

  // getPreviewContent reads preview_token, key, ver, ctx from query params,
  // fetches the draft version, and populates the withAppContext context store.
  // OptimizelyComponent dispatches to the right component by __typename -
  // same path as the published page, no separate preview renderer needed.
  const content = await client.getPreviewContent(params as PreviewParams);

  return (
    <>
      <Script src={`${CMS_URL}/util/javascript/communicationinjector.js`} strategy="afterInteractive" />
      <NextPreviewComponent />
      <OptimizelyComponent content={content} />
    </>
  );
}

export default withAppContext(PreviewPage);

// communicationinjector.js is injected on the /preview route only.
// The root layout (src/app/layout.tsx) does NOT inject it - the script is
// only needed when the page is loaded inside the CMS editor iframe.

// src/app/preview/page.tsx
return (
  <>
    <Script
      src={`${process.env.NEXT_PUBLIC_OPTIMIZELY_CMS_URL}/util/javascript/communicationinjector.js`}
      strategy="afterInteractive"
    />
    <NextPreviewComponent />
    <OptimizelyComponent content={content} />
  </>
);

// The CMS preview_token is a ~5-minute JWT and cannot be extended - Optimizely
// provides no API to mint a stable one. To let a stakeholder with no CMS login
// open a draft, authenticate to Graph with the App Key + Secret instead:
// "querying with HMAC is equivalent to querying as a super user ... returns all
// content regardless of publication status" - and it never expires.

// src/lib/optimizely/adminPreviewClient.ts - a GraphClient whose request() is
// patched to send Basic auth (App Key + Secret) rather than Bearer <preview_token>.
Authorization: `Basic ${btoa(`${OPTIMIZELY_APP_KEY}:${OPTIMIZELY_APP_SECRET}`)}`

// The shareable URL carries NO Graph credential - only key / loc / (ver) plus an
// HMAC-SHA256 signature (src/lib/preview/shareLink.ts), so a recipient cannot
// edit the query string to pull a different content key.
/preview/share?key=<key>&loc=en&ver=<n>&sig=<hmac>

// src/app/preview/share/page.tsx verifies the signature, resolves the version
// (pinned, or newest by _metadata.lastModified), fetches the draft with the
// admin client, and renders it read-only - no communicationinjector, no
// NextPreviewComponent. Links stay valid until OPTIMIZELY_PREVIEW_SECRET rotates.