Flags SDK with OpenFeature

Flags SDK with OpenFeature is a Next.js App Router example template that evaluates two server-side feature flags — a welcome message and a banner toggle — using Flags SDK with OpenFeature's built-in InMemoryProvider, so no external provider account or credentials are required.

What is Flags SDK with OpenFeature?

This is a minimal example project from the Flags SDK repository (by Vercel) demonstrating how to wire OpenFeature into a Next.js App Router application. It includes a flags.ts file that declares the welcome_message and show_banner flag definitions, which the home page evaluates with evaluate(). Its output is rendered server-side, and an optional FLAGS_SECRET environment variable enables the Flags Explorer discovery endpoint at /.well-known/vercel/flags.

Key Features

• Next.js App Router — the example runs on Next.js App Router with server-side flag evaluation.
• OpenFeature InMemoryProvider — flags are backed by OpenFeature's in-memory provider, requiring no provider account or credentials.
• Two declared flags — welcome_message (a greeting string) and show_banner (with defaultVariant on or off) are defined in flags.ts.
• Flags Explorer endpoint — getProviderData from flags/next exposes flag definitions via /.well-known/vercel/flags, protected by FLAGS_SECRET.
• Vercel Toolbar integration — the toolbar appears during local development and on preview deployments, letting you override flags per session.
• One-click deploy — a Vercel Deploy button copies only this folder and installs published npm packages.
• Node.js 22+ — building and running the example requires Node.js 22 or newer.
• Single targeting key — every visitor uses the demo-user targeting key; replace identify in flags.ts to add user targeting.

Who is it for?

• Developers learning Flags SDK: see a minimal, credential-free setup of server-evaluated flags in a Next.js App Router app.
• Teams evaluating OpenFeature: try OpenFeature integration patterns before swapping in a production provider in flags.ts.
• Vercel users testing Flags Explorer: link the folder with vercel link, add FLAGS_SECRET, and override flags per session without changing provider configuration.

What can you do with Flags SDK with OpenFeature?

• Learn flag evaluation: change the greeting or switch the banner's defaultVariant from on to off in flags.ts, then refresh to see the server-evaluated result.
• Test session overrides: sign in to the toolbar and open Flags Explorer to override the greeting or banner for your session without touching provider configuration.
• Swap in a real provider: replace the in-memory provider in flags.ts with your OpenFeature provider for production; the adapter waits for provider initialization before evaluating flags.

How does Flags SDK with OpenFeature work?

1. Copy .env.example to .env.local and set FLAGS_SECRET to a random value generated with a Node.js one-liner (32 random bytes, base64url-encoded).
2. Run pnpm install and pnpm dev, then open http://localhost:3000.
3. Optionally run vercel link and add the same FLAGS_SECRET as a regular Development environment variable, or pull it with vercel env pull .env.local.

Inside the Flags SDK repository, run pnpm exec turbo run dev --filter=flags-sdk-openfeature from the root; the workspace overrides flags and @flags-sdk/openfeature with local packages.

FAQ

Is this example free to use?

Yes. It is an openly available example from the Flags SDK repository and deploys with the Vercel Deploy button, which copies only the example folder and installs published npm packages.

Do I need an OpenFeature provider account?

No. The example uses OpenFeature's built-in InMemoryProvider, so no credentials or provider account are needed; for production you replace the provider in flags.ts.

What Node.js version is required?

The example requires Node.js 22 or newer for building and running.

Does every visitor get a different flag value?

No. Every visitor uses the same demo-user targeting key; to add user targeting, replace identify in the example.