Growthbook Flags SDK Example

Growthbook Flags SDK Example is a Next.js demo template from the Vercel examples repository that connects GrowthBook feature flags and experiments to an app through the Flags SDK and the @flags-sdk/growthbook adapter.

What is Growthbook Flags SDK Example?

The template is a runnable Next.js app that reads three GrowthBook flags and renders their values directly into the UI. It controls the visibility of two banners on the home page and the color of the checkout button, so any visitor sees both, one, or neither banner along with a button rendered in red, green, or blue. Flag definitions live in a flags.ts file and their keys must match the flag IDs created inside GrowthBook. Deployment targets Vercel, and the template ships with a one-click Deploy button plus CLI instructions.

What makes it stand out?

• Flags SDK integration — flag declarations are wired through the Flags SDK so components read evaluated values rather than hardcoded booleans.
• GrowthBook adapter — the @flags-sdk/growthbook provider connects the app to GrowthBook feature gates and experiments.
• Three prewired flags — free_delivery and summer_sale are set up as 50% rollouts or experiments, while proceed_to_checkout serves three variants: red, green, and blue.
• Flags Explorer overrides — when the project is linked on Vercel, the Flags Explorer in the Vercel Toolbar shows which variants are active and lets you create overrides to test other variations.
• Built-in Dev Tools — a panel at the bottom of the home page resets the stable ID and reloads the page so you can observe a different variation.
• Environment setup for the secret — the deploy flow asks for a FLAGS_SECRET value described as 34 bytes with base64url encoding, with a link to the Vercel reference documentation.
• Live demo — a hosted instance runs at flags-sdk-growthbook.vercel.app.
• CLI workflow — vercel link connects the local project, vercel env pull fetches environment metadata, and vercel env add sets variables manually.

Who should use it?

• Next.js developers adding feature flags: start from a working project instead of wiring the Flags SDK and a provider from scratch.
• GrowthBook users on Vercel: see how GrowthBook gates and experiments surface inside a deployed app and the Vercel Toolbar.
• Teams planning A/B tests: use the three sample flags as a pattern for rollouts and multi-variant experiments.
• Engineers evaluating the Flags SDK: inspect a minimal, readable implementation that maps flag IDs to UI output.

How does it work?

1. Link the local project to Vercel with vercel link, then pull environment variables with vercel env pull so the Flags SDK and Flags Explorer get the metadata they need.
2. Create a GrowthBook project containing the flags free_delivery, summer_sale, and proceed_to_checkout, keeping IDs identical to the keys in flags.ts.
3. Start the experiments if you have not already — the page notes that traffic splits are only visible once experiments are running.

FAQ

What does this template actually render?

It renders two banners on the home page whose visibility is decided by the free_delivery and summer_sale flags, plus a checkout button colored red, green, or blue by the proceed_to_checkout flag. A visitor may see both banners, one, or none.

Do I need a GrowthBook account?

Yes. The template expects a GrowthBook project with three flags whose IDs match the keys in the flags.ts file, and experiments must be started before traffic splits appear.

How do I test different variations locally?

The home page includes Dev Tools at the bottom that reset the stable ID and reload the page, producing a new variation. On a linked Vercel project you can also create overrides from the Flags Explorer in the Vercel Toolbar.

Is a secret environment variable required?

Yes. The deploy flow prompts for FLAGS_SECRET, described as 34 bytes of base64url-encoded data, and links to the Vercel reference for the Flags Explorer environment variable.