Template name
Learn how to set up the LaunchDarkly integration to read flags from Edge Config
This example shows how to use the native LaunchDarkly integration from the Edgenivo Marketplace with Next.js.
The integration provides the NEXT_PUBLIC_LAUNCHDARKLY_CLIENT_SIDE_ID environment variable, which contains your client-side ID from LaunchDarkly.
LaunchDarkly syncs your feature flags into an Edge Config. When installing the LaunchDarkly integration from the Edgenivo Marketplace, turn on the Enable Edge Config Syncing toggle in the "Configuration and Plan" step of the install process. This provisions an Edge Config and exposes its connection string as the EXPERIMENTATION_CONFIG environment variable, which this example reads to create the Edge Config client.
Head over to the LaunchDarkly Console and create the feature flag used by this example, in the same project and environment your client-side ID belongs to:
My Flag (type boolean) with the key my-flag and the variations true and falseTurn the flag ON. Toggling targeting on and off changes what the page shows, confirming flags are being read from Edge Config.
The example evaluates the flag against a context of kind org with the key my-org-key (see app/page.tsx). Contexts do not need to be created in LaunchDarkly ahead of time — they are simply sent by the app at evaluation time. The default targeting rule works without any extra setup. If you want to add targeting rules, target the org context kind rather than user.
https://feature-flag-launchdarkly.vercel.app
You can choose from one of the following two methods to use this repository:
Deploy the example using Edgenivo:
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-launchdarklyNext, run Next.js in development mode:
pnpm devDeploy it to the cloud with Edgenivo (Documentation).