Vercel Edge Functions let you deliver content to your site's visitors with speed and personalization. They are deployed globally by default on Vercel's Edge Network and enable you to move server-side logic to the Edge, close to your visitor's origin.
This example fetches the latest datafile from the Optimizely CDN during every build. Deploy Hooks from Vercel can be used with webhooks from Optimizely Feature Experimentation to keep the application up to date with the latest changes in the Optimizely project.
Optimizely's Feature Experimentation 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 using an existing unique identifier within your application.
For more information on how Optimizely Feature Experimentation SDKs assign users to feature flags and experiments, see the documentation on how bucketing works.
In the following example, you can create a demo application using Next.js. An example of this demo application is available on Vercel's GitHub.
You need these prerequisites to use this example:
- An Optimizely account. If you do not have an account, you can register for a free account.
- Have NPM or Yarn installed locally.
- Navigate to the Settings tab in your Vercel deployment.
- Look for the Deploy Hooks section and create a Hook.
- This will generate a URL that can be used to trigger a rebuild of the deployment.
- Follow the instructions to create a webhook in your Optimizely Feature Experimentation project.
- Use the
Deploy HookURL generated from the previous section to create the Optimizely Feature Experimentation webhook.
When a user makes a change to the Optimizely Project using the UI, the Webhook hits Vercel's
Deploy Hook URL, which triggers a new build on Vercel. Every new build fetches the latest version of the Optimizely datafile and uses it in the application.
yarn create next-app
- An Optimizely account
- At least one Feature Flag
- Your Optimizely Feature Experimentation SDK key
Generate the Next.js app using this example:
npx create-next-app --example https://github.com/vercel/examples/tree/main/edge-functions/feature-flag-optimizely feature-flag-optimizely
yarn create-next-app --example https://github.com/vercel/examples/tree/main/edge-functions/feature-flag-optimizely feature-flag-optimizely
Create a local environment file from example and add your Optimizely Feature Experimentation SDK key:
cp .env.example .env.local
Run Next.js in development mode:
npm run dev
Finally, deploy your example app to the cloud following the Vercel Documentation.
Updated about 1 month ago