Flags SDK with LaunchDarkly

A minimal Next.js App Router template that connects Vercel's Flags SDK to LaunchDarkly and evaluates two feature flags on the server. The example demonstrates flag-driven rendering of a welcome message and a conditional banner, and ships with Flags Explorer support for overriding evaluated values in the Vercel Toolbar.

What is Flags SDK with LaunchDarkly?

Flags SDK with LaunchDarkly is a provider example in the Vercel Flags SDK repository, built on the Next.js App Router. It takes a LaunchDarkly environment plus a Global Config connection string as input, evaluates two flags (welcome_message, a string, and show_banner, a boolean) via the Flags SDK evaluate() API, and outputs a home page whose greeting and banner come from those server-side values. It is published by Vercel as part of the open-source Flags SDK repository (628 GitHub stars).

Key Features

• Next.js App Router base — a single example app that installs published SDK packages and builds with the standard Next.js build command.
• Server-side flag evaluation — both flags are resolved with the Flags SDK evaluate() API rather than in the browser.
• Two sample flags — welcome_message (String, default Hello from LaunchDarkly) and show_banner (Boolean, default true).
• LaunchDarkly adapter — @flags-sdk/launchdarkly supplies getProviderData, which loads flag metadata from LaunchDarkly for the Flags Explorer.
• Discovery endpoint — /.well-known/vercel/flags exposes flag metadata protected by FLAGS_SECRET and reports evaluated values to the toolbar.
• Flags Explorer overrides — override the greeting or banner for a single session from the Vercel Toolbar, which is included during local development.
• Shared demo context — every visitor uses the same demo-user context; targeting is added by editing identify in flags.ts.
• One-click Deploy button — copies only this folder, prompts for LAUNCHDARKLY_API_KEY, LAUNCHDARKLY_ENVIRONMENT, and FLAGS_SECRET, and installs the LaunchDarkly integration.

How does it work?

1. Install the LaunchDarkly integration from the Vercel Marketplace and enable Global Config Syncing; the integration supplies the EXPERIMENTATION_CONFIG connection string.
2. Create welcome_message and show_banner in your LaunchDarkly environment, enable SDKs using the client-side ID, and turn both flags on.
3. Set EXPERIMENTATION_CONFIG, LAUNCHDARKLY_PROJECT_SLUG, LAUNCHDARKLY_CLIENT_SIDE_ID, and a generated FLAGS_SECRET in .env.local.
4. Run pnpm install and pnpm dev, then change flag values in LaunchDarkly and refresh once Global Config has synced.

Who is it for?

• Next.js developers evaluating a feature-flag provider — get a working LaunchDarkly-backed page without writing adapter code.
• Teams standardizing on Flags SDK — use it as the reference pattern for a server-evaluated provider adapter.
• Developers testing Flags Explorer — try session-level overrides in the Vercel Toolbar against real LaunchDarkly flags.

Use cases

• Server-rendered personalization: swap the greeting string for each visitor by replacing the shared demo-user context with your own identify logic.
• Progressive rollout of UI changes: toggle show_banner in LaunchDarkly and refresh to see the flag take effect after Global Config syncs.
• Monorepo development: run the example inside the Flags SDK repository with turbo run dev --filter=flags-sdk-launchdarkly, where workspace overrides point flags and @flags-sdk/launchdarkly at local source.

What are the requirements?

Node.js 22 or newer is recommended. Flags Explorer metadata needs a LaunchDarkly REST API token with read access to flags (LAUNCHDARKLY_API_KEY) plus your environment key (LAUNCHDARKLY_ENVIRONMENT, for example test) — both are separate from the client-side ID and the Global Config connection string. For local toolbar use, link the folder with vercel link and add the same FLAGS_SECRET to the project's Development environment, then restart the dev server.