Learn how to use optimizely to conduct experiments at the edge.
This example shows how to use Optimizely to conduct experiments using Edge Middleware.
https://feature-flag-optimizely.vercel.app
You can choose from one of the following two methods to use this repository:
Note: Before clicking Deploy
, follow the section Set up Optimizely to create an account, set up feature flags and obtain the Optimizely SDK Key.
Execute create-next-app
with pnpm to bootstrap the example:
pnpm create-next-app --example https://github.com/vercel/examples/tree/main/edge-middleware/feature-flag-optimizely feature-flag-optimizely
Note: Before running locally, follow the section Set up Optimizely to create an account, set up feature flags and obtain the Optimizely SDK Key.
Create a local environment file from example and add your Optimizely SDK Key.
cp .env.example .env.local
Next, run Next.js in development mode:
pnpm dev
Deploy it to the cloud with Vercel (Documentation).
Optimizely Full Stack is a feature flagging and experimentation platform for websites, mobile apps, chatbots, APIs, smart devices, and anything else with a network connection.
You can deploy code behind feature flags, experiment with A/B tests, and roll out or roll back features immediately. All of this functionality is available with minimal performance impact through easy-to-use, open source SDKs.
You can use Optimizely feature flags at the edge with NextJS applications deployed on Vercel. This example uses Optimizely Javascript SDK inside a Edge Middleware as a starting point for you to implement experimentation and feature flagging for your experiences at the edge. For a guide to getting started with our platform more generally, this can be combined with the steps outlined in our Javascript Quickstart.
Out of the box, Optimizely's Full Stack SDKs require a user-provided identifier to be passed in at runtime to drive experiment and feature flag decisions. This example generates a unique id, stores it in a cookie and reuses it to make the decisions sticky. Another common approach would be to use an existing unique identifier available within your application.
For more information on how Optimizely Full Stack SDKs assign users to feature flags and experiments, see the documentation on how bucketing works.
This example fetches the latest datafile from the Optimizely CDN during every build. Deploy Hooks from Vercel can be used with Optimizely Webhooks to keep the application up to date with the latest changes in the Optimizely project.
Deploy Hook
URL Generated from the previous section to create the Optimizely Webhook.When a user makes a change to the Optimizely Project using the UI, the Webhook hits Vercel's Deploy Hook
URL to trigger a new build on Vercel. Every new build fetches the latest version of the Optimizely datafile and uses it in the application.
You need an account to follow this example. If you do not have an account, you can register for a free account. If you already have an account navigate to your Flags-enabled project.
OPTIMIZELY_SDK_KEY
A feature flag lets you control the users that are exposed to a new feature code in your app. For this example, imagine that you are rolling out a redesigned sorting feature for displaying products.
Create a flag in Optimizely named product_sort and give it a variable named sort_method:
Make a targeted delivery rule for the "on" variation for the product_sort flag. A targeted delivery lets you gradually release a feature flag to users, with the flexibility to roll it back if you encounter bugs.
Verify that you are in your primary environment (since you are using the primary environment SDK key):
Click Add Rule and select Targeted Delivery.
Set the traffic slider to 50%. This delivers the flag to 50% of everyone who triggers the flag in this environment. You can roll out or roll back the product_sort flag to a percentage of traffic whenever you want.
select On from the Deliver dropdown, .
Click Save.
Enable the flag for your flag rule:
Learn how to use optimizely to conduct experiments at the edge.
This example shows how to use Optimizely to conduct experiments using Edge Middleware.
https://feature-flag-optimizely.vercel.app
You can choose from one of the following two methods to use this repository:
Note: Before clicking Deploy
, follow the section Set up Optimizely to create an account, set up feature flags and obtain the Optimizely SDK Key.
Execute create-next-app
with pnpm to bootstrap the example:
pnpm create-next-app --example https://github.com/vercel/examples/tree/main/edge-middleware/feature-flag-optimizely feature-flag-optimizely
Note: Before running locally, follow the section Set up Optimizely to create an account, set up feature flags and obtain the Optimizely SDK Key.
Create a local environment file from example and add your Optimizely SDK Key.
cp .env.example .env.local
Next, run Next.js in development mode:
pnpm dev
Deploy it to the cloud with Vercel (Documentation).
Optimizely Full Stack is a feature flagging and experimentation platform for websites, mobile apps, chatbots, APIs, smart devices, and anything else with a network connection.
You can deploy code behind feature flags, experiment with A/B tests, and roll out or roll back features immediately. All of this functionality is available with minimal performance impact through easy-to-use, open source SDKs.
You can use Optimizely feature flags at the edge with NextJS applications deployed on Vercel. This example uses Optimizely Javascript SDK inside a Edge Middleware as a starting point for you to implement experimentation and feature flagging for your experiences at the edge. For a guide to getting started with our platform more generally, this can be combined with the steps outlined in our Javascript Quickstart.
Out of the box, Optimizely's Full Stack SDKs require a user-provided identifier to be passed in at runtime to drive experiment and feature flag decisions. This example generates a unique id, stores it in a cookie and reuses it to make the decisions sticky. Another common approach would be to use an existing unique identifier available within your application.
For more information on how Optimizely Full Stack SDKs assign users to feature flags and experiments, see the documentation on how bucketing works.
This example fetches the latest datafile from the Optimizely CDN during every build. Deploy Hooks from Vercel can be used with Optimizely Webhooks to keep the application up to date with the latest changes in the Optimizely project.
Deploy Hook
URL Generated from the previous section to create the Optimizely Webhook.When a user makes a change to the Optimizely Project using the UI, the Webhook hits Vercel's Deploy Hook
URL to trigger a new build on Vercel. Every new build fetches the latest version of the Optimizely datafile and uses it in the application.
You need an account to follow this example. If you do not have an account, you can register for a free account. If you already have an account navigate to your Flags-enabled project.
OPTIMIZELY_SDK_KEY
A feature flag lets you control the users that are exposed to a new feature code in your app. For this example, imagine that you are rolling out a redesigned sorting feature for displaying products.
Create a flag in Optimizely named product_sort and give it a variable named sort_method:
Make a targeted delivery rule for the "on" variation for the product_sort flag. A targeted delivery lets you gradually release a feature flag to users, with the flexibility to roll it back if you encounter bugs.
Verify that you are in your primary environment (since you are using the primary environment SDK key):
Click Add Rule and select Targeted Delivery.
Set the traffic slider to 50%. This delivers the flag to 50% of everyone who triggers the flag in this environment. You can roll out or roll back the product_sort flag to a percentage of traffic whenever you want.
select On from the Deliver dropdown, .
Click Save.
Enable the flag for your flag rule: