Feature Experimentation

// src/middleware.ts
import { createInstance, createStaticProjectConfigManager, OptimizelyDecideOption }
  from "@optimizely/optimizely-sdk/universal";

export const VARIATION_MARKER = "__v_";

export async function middleware(request: NextRequest) {
  const response = NextResponse.next();

  // Set a stable visitor ID (not httpOnly - browser SDK reads it for bucketing events).
  const userId = request.cookies.get("optimizelyEndUserId")?.value ?? crypto.randomUUID();
  if (!request.cookies.get("optimizelyEndUserId")) {
    response.cookies.set("optimizelyEndUserId", userId, {
      maxAge: 60 * 60 * 24 * 365, sameSite: "lax", path: "/",
    });
  }

  // Skip API routes and already-rewritten paths.
  if (request.nextUrl.pathname.startsWith("/api/")) return response;
  if (request.nextUrl.pathname.includes(VARIATION_MARKER)) return response;

  // Fetch datafile with 60s edge cache (Vercel CDN caches this automatically).
  const datafile = await fetch(DATAFILE_URL, { next: { revalidate: 60 } }).then((r) => r.text());

  const client = createInstance({
    projectConfigManager: createStaticProjectConfigManager({ datafile }),
    requestHandler: noOpRequestHandler, // no HTTP needed - static config only
  });

  const ctx = client.createUserContext(userId, { device, persona, ... });
  const decisions = ctx.decideAll([OptimizelyDecideOption.DISABLE_DECISION_EVENT]);

  // Collect active decisions sorted by variationKey for a stable ISR cache key.
  const activeDecisions = Object.values(decisions)
    .filter((d) => d.enabled && d.variationKey && d.variationKey !== "off")
    .sort((a, b) => (a.variationKey as string).localeCompare(b.variationKey as string));

  if (activeDecisions.length === 0) return response;

  // Rewrite URL: /savings → /savings/__v_homepage--business
  // Each segment encodes flagKey--variationKey so the page knows which flag fired.
  // The user sees /savings in the browser - the rewrite is transparent.
  // Next.js catches each rewritten path as a separate ISR cache entry.
  const url = request.nextUrl.clone();
  const variationSuffix = activeDecisions
    .map((d) => `__v_${d.flagKey}--${d.variationKey}`)
    .join("/");
  url.pathname = url.pathname.replace(/\/$/, "") + `/${variationSuffix}`;
  return NextResponse.rewrite(url, { headers: response.headers });
}

// src/lib/optimizely/user.ts
import { cache } from "react";
import { OptimizelyDecideOption } from "@optimizely/optimizely-sdk";
import { getOptimizelyClient } from "./experimentation";
import { getVisitorContext } from "./visitor";

// cache() scopes to a single HTTP request's render tree.
// Every component that calls getOptimizelyUser() shares one user context.
// 1,000 concurrent visitors → 1,000 independent contexts, nothing shared.
export const getOptimizelyUser = cache(async () => {
  const [client, { userId, attributes, bucketingId }] = await Promise.all([
    getOptimizelyClient(), // one SDK instance per request (React cache() + 60s Next.js fetch cache)
    getVisitorContext(),    // reads: optimizelyEndUserId cookie, User-Agent → device, demo cookies
  ]);

  if (!client) return noOpUser; // FX unreachable → all decide() calls return { enabled: false }

  const ctx = client.createUserContext(userId, attributes);
  return {
    userId,
    bucketingId,
    //
    // decide(flagKey)                → DISABLE_DECISION_EVENT: flag evaluated, no impression fired
    // decide(flagKey, [])            → no options → impression fires, registers user in FX results
    // decide(flagKey, {bucketingId}) → override bucketing ID for account-level experiments
    // decide(flagKey, {attributes})  → merge extra attributes for this call only
    //
    decide(flagKey: string, opts?: OptimizelyDecideOption[] | DecideOpts): FxDecision { /* ... */ },
    decideAll(): Record<string, FxDecision> {
      // Always DISABLE_DECISION_EVENT - evaluate all flags without recording anything.
      return ctx.decideAll([OptimizelyDecideOption.DISABLE_DECISION_EVENT]);
    },
  };
});

// src/app/[[...slug]]/page.tsx
// Middleware rewrites: /savings → /savings/__v_homepage--business
//   VARIATION_MARKER = "__v_"   FLAG_VAR_SEP = "--"
// Both flagKey and variationKey are encoded in the URL segment so the page
// knows which flag to fire the bucketing event for - no extra SDK call needed.
import { VARIATION_MARKER, FLAG_VAR_SEP } from "@/middleware";

function extractVariations(slug) {
  const cleanSlug = slug?.filter((s) => !s.startsWith(VARIATION_MARKER));
  const flagVariations = slug
    ?.filter((s) => s.startsWith(VARIATION_MARKER))
    .map((s) => {
      const [flagKey, variationKey] = s.slice(VARIATION_MARKER.length).split(FLAG_VAR_SEP);
      return { flagKey, variationKey };
    }) ?? [];
  return {
    cleanSlug,
    activeVariations: flagVariations.map((fv) => fv.variationKey), // for Graph filter
    flagVariations,                                                  // for bucketing event
  };
}

async function CmsPage({ params }) {
  const { slug } = await params;
  const { cleanSlug, activeVariations, flagVariations } = extractVariations(slug);

  // Pass variation keys to Graph - same filter as always, now sourced from URL not cookies
  const variationOption = activeVariations.length > 0
    ? { variation: { include: "SOME" as const, value: activeVariations, includeOriginal: true } }
    : undefined;

  const client = getClient();
  const items = await client.getContentByPath(`/${cleanSlug.join("/")}/`, variationOption);
  const page = items.find((i) => activeVariations.includes(i._metadata?.variation)) ?? items[0];

  // Look up flagKey by the variationKey Graph actually served
  const servedVariation = page._metadata?.variation ?? null;
  const servedFlagKey = flagVariations.find((fv) => fv.variationKey === servedVariation)?.flagKey ?? null;

  return (
    <>
      <OptimizelyComponent content={page} />
      {servedFlagKey && <FxBucketingEvent flagKey={servedFlagKey} />}
    </>
  );
}

// src/components/FxBucketingEvent.tsx
// flagKey is passed in from the page - it was encoded in the URL by middleware:
//   /savings → /savings/__v_homepage--business
// extractVariations() in page.tsx parses it back out.
// No decideAll() here - the flagKey is already known from the route.

"use client";
export function FxBucketingEvent({ flagKey }: { flagKey: string }) {
  useEffect(() => {
    const userId = getCookie("optimizelyEndUserId");
    if (!userId) return;
    void getOptimizelyBrowserClient().then((client) => {
      if (!client) return;
      const ctx = client.createUserContext(userId, { device, ... });
      ctx?.decide(flagKey, []); // fire bucketing event for this flag only
    });
  }, [flagKey]);
  return null;
}

// src/app/[[...slug]]/page.tsx
// flagKey comes from the URL segment, not from a client-side SDK call.
// flagVariations = [{ flagKey: "homepage", variationKey: "business" }]
const { cleanSlug, activeVariations, flagVariations } = extractVariations(slug);
const servedVariation = page._metadata?.variation ?? null;
const servedFlagKey = flagVariations.find((fv) => fv.variationKey === servedVariation)?.flagKey ?? null;

return (
  <>
    <OptimizelyComponent content={page} />
    {servedFlagKey && <FxBucketingEvent flagKey={servedFlagKey} />}
  </>
);

import { getOptimizelyUser } from "@/lib/optimizely/user";

export default async function MyPage() {
  const user = await getOptimizelyUser();

  // Evaluate without firing an impression (default: DISABLE_DECISION_EVENT)
  const decision = user.decide("hero_copy");
  if (!decision.enabled) return null;

  // Once you know the variation will be shown, fire the impression:
  void user.decide("hero_copy", []);

  // Variables come back typed - you cast to the type you expect
  const headline = decision.variables.headline as string;
  const subheadline = decision.variables.subheadline as string;
  return <Hero headline={headline} subheadline={subheadline} variation={decision.variationKey} />;
}