Next.js Optimizely Experimentation

A Next.js App Router template that wires Optimizely Feature Experimentation into a Vercel-hosted storefront, syncing experiment data to Vercel Edge Config so flag decisions run in Edge Middleware and React Server Components.

What is Next.js Optimizely Experimentation?

It is a Next.js template that integrates Optimizely Feature Experimentation into an ecommerce-style demo app. Users configure Optimizely credentials plus Vercel Edge Config environment variables, run the dev server on port 3000, and get a working example of flag-based experimentation with static-plus-dynamic rendering. Optimizely webhooks push datafile, flag, event, variable, and variation changes into Vercel Edge Config, letting middleware and server components make decisions with minimal latency. The project is maintained in the Vercel GitHub organization.

What makes it stand out?

• Partial Prerendering (PPR) — combines static and dynamic rendering so pages load fast while still serving per-shopper experiment content.
• Edge Config sync via Optimizely webhooks — datafile and flag changes are stored in Vercel Edge Config through a webhook route at /api/.well-known/vercel/webhooks/optimizely.
• Edge Middleware flag evaluation — /middleware.ts evaluates precomputed flags and sets a shopper cookie.
• Server-side event tracking — server actions in /lib/actions.ts handle things such as tracking a purchase event.
• Vercel Toolbar integration — a flags API route at /app/.well-known/vercel/flags/route.ts exposes declared flags to the toolbar.
• Ecommerce pages included — a static homepage with a [code] dynamic segment for variations, product detail pages at /app/product/[slug], and a cart page.
• Tailwind CSS and shadcn/ui — styling stack used across the template.

Who is it for?

• Growth and experimentation engineers: see a working pattern for running Optimizely experiments inside App Router without slowing page loads.
• Frontend developers on Vercel: copy the webhook-to-Edge-Config pipeline to keep flag evaluation at the edge.
• Teams evaluating server-side experimentation: use the included product and cart pages as a testbed for precomputed flags.

What can you do with it?

• A/B test product pages: vary content per visitor through the [code] dynamic segment and precomputed flags.
• Experiment with edge decisions: evaluate flags in middleware and store the shopper cookie for consistent assignment.
• Track conversions server-side: record purchase events from server actions linked to Optimizely.

How does it work?

1. Create an Optimizely Feature Experimentation project and collect the API key, SDK key, and project ID.
2. Create a Vercel Edge Config store and API token, then set all eight environment variables.
3. Register an Optimizely webhook pointing at your deployed webhook route and save its secret.
4. Create or update a flag to trigger the webhook and sync data into Edge Config.

FAQ

Is this template free?

Yes. It is a public GitHub template that you deploy to your own Vercel account. You need your own Optimizely Feature Experimentation account and a Vercel Edge Config store.

What environment variables are required?

Eight are listed: OPTIMIZELY_API_KEY, OPTIMIZELY_SDK_KEY, OPTIMIZELY_PROJECT_ID, OPTIMIZELY_WEBHOOK_SECRET, API_TOKEN, TEAM_ID, EDGE_CONFIG, and FLAGS_SECRET. The flags secret can be generated with a Node crypto command shown in the docs.

Which Optimizely webhook events must be selected?

The docs require Datafile: Updated; Flag, Event, Variable, and Variation Created, Updated, Archived, and Deleted; and the corresponding flag archived/deleted events.