Flags SDK with Statsig

Flags SDK with Statsig is a Next.js App Router example template that server-evaluates two Statsig flags to control a greeting message and the visibility of a banner, built and maintained by Vercel. It runs on Next.js with Node.js 22 or newer recommended.

What is Flags SDK with Statsig?

This template demonstrates the Vercel Flags SDK using the Statsig provider (@flags-sdk/statsig). It uses the Flags SDK evaluate() API to resolve two flags on the server: welcome_message_text, a Statsig Dynamic Config whose default value sets the greeting text, and show_banner, a Statsig Feature Gate configured with a rule that passes for 100% of users. The home page displays the resulting greeting and conditionally renders a banner. The example is part of Vercel's flags repository under examples/providers/statsig.

Key Features

• Server-evaluated flags — both flags are resolved with the Flags SDK evaluate() API rather than client-side calls.
• Statsig Dynamic Config — welcome_message_text returns a text value that drives the greeting.
• Statsig Feature Gate — show_banner uses a 100% pass rule to demonstrate boolean flag evaluation.
• Flags Explorer integration — flag definitions are exposed at /.well-known/vercel/flags, protected by FLAGS_SECRET, and can be overridden per session from the Vercel Toolbar.
• Fixed demo context — every visitor shares a demo-user context; identify in flags.ts is the place to add user targeting.
• Optional Global Config Syncing — enable it in the Vercel integration and set EXPERIMENTATION_CONFIG and EXPERIMENTATION_CONFIG_ITEM_KEY to use the synced configuration.
• Deploy button — clones only this folder, installs published packages, and uses the standard Next.js build command via Vercel.

Who is it for?

• Next.js developers adopting Statsig — see the minimal wiring needed to read a Dynamic Config and a Feature Gate server-side.
• Teams using the Vercel Toolbar — learn how to register flag definitions and override flag values in Flags Explorer for a session.
• Developers evaluating the Flags SDK — use the template as a starting point before adding user-targeting logic in flags.ts.

How does it work?

Install the Statsig integration or use an existing project, then create welcome_message_text (Dynamic Config with default text) and show_banner (Feature Gate with a 100% rule) in Statsig. Copy .env.example to .env.local and set STATSIG_SERVER_API_KEY plus a generated FLAGS_SECRET. Run pnpm install and pnpm dev, then open http://localhost:3000; change values in Statsig and refresh after the SDK syncs.

Use cases

• Greeting experiments: change the Dynamic Config default or synced config to alter the welcome text without editing code.
• Banner rollouts: toggle the Feature Gate to show or hide the banner, demonstrating a full pass rule.
• Local flag overrides: use Flags Explorer in the Vercel Toolbar to override flags for your session without touching Statsig values.