Flags SDK with Statsig

Flags SDK with Statsig

Use the Flags SDK (software development kit) with Statsig in a Next.js application. Feature flags are settings that change application behavior. The server evaluates two flags: welcome_message_text controls a greeting, and show_banner shows or hides a banner.

View the demo.

Deploy this template

The Deploy button copies the statsig example folder and installs published SDK packages.

Setup

Install the Statsig integration, or use an existing Statsig project.

Create these settings in Statsig:

A Dynamic Config stores values such as the greeting text. A Feature Gate supplies a boolean value that shows or hides the banner.

Copy .env.example to .env.local and set:

• STATSIG_SERVER_API_KEY: your Statsig server secret key.
• FLAGS_SECRET: generate this value with the command below.

For a linked Vercel project, use vercel env pull .env.local to get its environment variables.

You can enable Global Config Syncing in the integration. Set EXPERIMENTATION_CONFIG and EXPERIMENTATION_CONFIG_ITEM_KEY to use that configuration.

Change the config or gate in Statsig. Refresh the page after the SDK or Global Config has updated.

Generate FLAGS_SECRET from 32 random bytes, encoded as Base64url. Base64url is an encoding that uses URL-safe characters.

1
node -e "console.log(require('crypto').randomBytes(32).toString('base64url'))"

Use the same FLAGS_SECRET in .env.local and the matching Vercel project environment. For Development, add it as a regular environment variable (Config).

Run locally

Node.js 22 or newer is recommended. From the copied example folder, run:

1
pnpm install
2
pnpm dev

Open http://localhost:3000.

For a production build, run:

1
pnpm build
2
pnpm start

Try the flags

Every visitor uses the same demo-user identity. Change identify in flags.ts to add user targeting. User targeting selects flag values for specific users.

Flags Explorer

Flags Explorer is the Vercel Toolbar tool for temporary flag values. The example exposes flag definitions at /.well-known/vercel/flags. FLAGS_SECRET protects this endpoint, which is the URL that supplies flag information. Link the example folder with vercel link and sign in to the toolbar. Restart the development server after linking.

Open Flags Explorer to change the greeting or banner for your session. These temporary values do not change the provider configuration. The example reports evaluated values to the toolbar.

For preview deployments, enable the Vercel Toolbar in project settings. Set the provider credentials and a matching FLAGS_SECRET for that environment.

See the Flags Explorer documentation for more information.

For development inside the Flags SDK repository, see the example README.