Flags SDK with GrowthBook

Flags SDK with GrowthBook is a Next.js App Router example that demonstrates two server-evaluated feature flags — a string greeting and a boolean banner toggle — powered by GrowthBook through the Flags SDK. The example is published by Vercel as part of the Flags SDK repository.

What is Flags SDK with GrowthBook?

This is a minimal Next.js App Router template that evaluates feature flags on the server using the Flags SDK's evaluate() API and GrowthBook as the flag provider. It takes two feature keys defined in GrowthBook — welcome_message (String, default Hello from GrowthBook) and show_banner (Boolean, default true) — and renders a home page whose greeting text and banner visibility follow those values. It runs on Next.js and can be deployed to Vercel with a one-click Deploy button that copies only this example folder, installing published SDK packages and using the standard Next.js build command.

Key Features

• Server-evaluated flags — both flags are evaluated server-side via the Flags SDK evaluate() API rather than in the browser.
• GrowthBook provider adapter — uses @flags-sdk/growthbook for evaluation and getProviderData for flag metadata.
• Flags Explorer discovery endpoint — a /.well-known/vercel/flags endpoint serves flag metadata, protected by FLAGS_SECRET.
• Vercel Toolbar integration — the toolbar is included in local development so you can override flag values per session in Flags Explorer; it is injected on preview deployments when enabled in project settings.
• Self-hosted GrowthBook support — configurable through GROWTHBOOK_API_HOST (SDK evaluation), GROWTHBOOK_APP_API_HOST (management API), and GROWTHBOOK_APP_ORIGIN (dashboard links).
• Two credentials model — GROWTHBOOK_CLIENT_KEY for SDK evaluation and a separate GROWTHBOOK_API_KEY (API key or personal access token with read access to features) for the management API.
• Standalone or monorepo workflow — runs independently via pnpm dev, or inside the repo with turbo run dev --filter=flags-sdk-growthbook.

Who is it for?

• Next.js developers evaluating feature flag tools: start from a working two-flag setup instead of wiring GrowthBook from scratch.
• Vercel users wanting Flags Explorer: see how FLAGS_SECRET-protected metadata and toolbar overrides fit together.
• Teams running self-hosted GrowthBook: use the host environment variables as a reference configuration.
• SDK contributors: exercise the local workspace versions of flags and @flags-sdk/growthbook through the Turbo pipeline.

How does it work?

Create the two features in GrowthBook, copy .env.example to .env.local, and set GROWTHBOOK_CLIENT_KEY. Generate FLAGS_SECRET with a one-line Node crypto command, then run pnpm install and pnpm dev. Change flag values in GrowthBook and refresh after the SDK's feature cache updates; every visitor shares a demo-user context until you replace identify in flags.ts.

FAQ

Is user targeting included?

The template uses a fixed demo-user context for all visitors. To add real targeting, replace the identify function in flags.ts with your own user identification logic.

Why are there two GrowthBook keys?

GROWTHBOOK_CLIENT_KEY is the SDK connection client key used for evaluation. GROWTHBOOK_API_KEY is separate and needs read access to features for the discovery endpoint's metadata.

What Node version is required?

Node.js 22 or newer is recommended for running the example.