Vercel Functions
Vercel Functions lets 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.
You can use Optimizely Feature Experimentation flags at the edge with NextJS applications deployed on Vercel. This example uses the JavaScript (Node) SDKJavaScript (Node) SDK inside Vercel Functions for you to start experimenting with your experiences at the Edge. For a general guide to getting started, see the JavaScript (Node) SDK QuickstartJavaScript (Node) SDK Quickstart.
Auto update with Optimizely webhooks and Vercel Functions
This example fetches the latest datafiledatafile from the Optimizely CDN during every build. Deploy Hooks from Vercel can be used with Optimizely webhooksOptimizely webhooks to keep the application up to date with the latest changes in the Optimizely project.
Identity management
Optimizely's Feature Experimentation SDKs require passing a user-provided identifier 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. Alternatively, you can use an existing unique identifier available within your application and pass it in as the value for the OPTIMIZELY_USER_ID cookie.
How bucketing works
See How bucketing worksHow bucketing works.
Demo application
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.
Prerequisites
To run this example, you need:
- An Optimizely account. If you do not have an account, you can sign up on Optimizely.com.
- Before running locally, follow the quickstart for the JavaScript SDKquickstart for the JavaScript SDK to create the following:
- At least one flagflag.
- Your SDK keySDK key.
Create a Deploy Hook in Vercel
- Go 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.
Create a Webhook in Optimizely
- Follow the instructions and configure a webhookwebhook in your Optimizely project.
- Use the Deploy Hook URL generated from the previous section to create the webhook.
How it works
When you make a change to your 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 datafiledatafile and uses it in the application.
Clone and deploy locally
- Execute create-next-app with NPM or Yarn to bootstrap the example:
npx create-next-app@latestyarn create next-app- Generate the Next.js app using this example:
npx create-next-app --example https://github.com/vercel/examples/tree/main/edge-middleware/feature-flag-optimizelyyarn 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 the example and add your SDK key:
cp .env.example .env.local- Run Next.js in development mode:
npm install
npm run devyarn
yarn dev- Deploy your example app to the cloud using the Next.js documentation on Deploying.
Additional resources
- Vercel Functions documentation