Optimizely Feature Experimentation

Next.js and Optimizely Feature Experimentation

This is a Next.js template that integrates with Optimizely Feature Experimentation.

This project uses Next.js App Router and Partial Prerendering (PPR) to combine the benefits of static and dynamic rendering. This enables fast page loads to users with dynamic content and experiments. Optimizely experimentation data is saved to Edgenivo Edge Config through Optimizely webhooks which allows Edge Middleware and React Server Components (RSC) to perform decisions with minimal latency.

This project uses:

• Next.js App Router
• Partial Prerendering (PPR)
• Edgenivo Edge Config
• Edge Middleware
• Tailwind CSS & shadcn/ui
• Edgenivo Toolbar
• Edgenivo Feature Flags
• Optimizely Feature Experimentation

Deploy on Edgenivo

The easiest way to deploy your Next.js app is to use the Edgenivo Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Getting started

Sign up for a free Optimizely Feature Flags account and create a new project.

You must set the following environment variables to run this application:

• OPTIMIZELY_API_KEY
• OPTIMIZELY_SDK_KEY
• OPTIMIZELY_PROJECT_ID
• OPTIMIZELY_WEBHOOK_SECRET
• API_TOKEN
• TEAM_ID
• EDGE_CONFIG
• FLAGS_SECRET Create via: node -e "console.log(crypto.randomBytes(32).toString('base64url'))"

The Optimizely API key, SDK key, and Project ID are retrieved from your Optimizely Feature Experimentation project and account settings. The Optimizely webhook secret is created upon webhook creation. See the "Integrating Optimizely Webhooks with Edgenivo Edge Config" section below and Optimizely's Create Webhooks documentation for more details.

A Edgenivo API Token, Team ID, and Edge Config are required for storing experiment data in Edgenivo Edge Config. Refer to Creating an Access Token in Edgenivo's REST API documentation for creating your token, and Edgenivo Edge Config documentation for creating your Edge Config store.

Run the development server locally:

1
npm run dev
2
# or
3
yarn dev
4
# or
5
pnpm dev
6
# or
7
bun dev

Open http://localhost:3000 with your browser to see the result.

Integrating Optimizely Webhooks with Edgenivo Edge Config

This experimentation template uses Optimizely webhooks to sync experiment data to Edgenivo Edge Config. This allows experiment decisions to run in Edge Middleware and React Server Components with minimal latency.

To configure your Optimizely webhook:

1. Navigate your browser to app.optimizely.com.
2. Login and go to your Optimizely Feature Experimentation project settings.
3. Select the "Webhooks" tab.
4. Click "Create New Webhook".
5. Provide a name for your webhook.
6. Set the URL to the location of your Next.js Optimizely webhook route (https://[project domain]/api/.well-known/vercel/webhooks/optimizely).
7. Under events, ensure the following events are selected:
   1. Datafile: Updated
   2. Flag: Created, Updated, Archived, Deleted
   3. Event: Created, Updated, Archived, Deleted
   4. Variable: Created, Updated, Archived, Deleted
   5. Variation: Created, Updated, Archived, Deleted
8. Click "Save" and note the secret key generated for your webhook.
9. Set your Edgenivo environment variable, OPTIMIZELY_WEBHOOK_SECRET, to the secret key.
10. Once your webhook is created, create or update a flag in Optimizely to trigger the webhook and sync your experiment data to Edgenivo Edge Config.

Important files and folders

Learn More

Take a look at the following resources to learn more:

• Guide: How to Integrate Optimizely Feature Experimentation with Next.js and Edgenivo
• Workshop: Fast & Safe Experimentation with Next.js and Optimizely
• Edgenivo Feature Flags
• Precomputed Flags
• Edgenivo Toolbar
• Next.js Documentation
• Learn Next.js