Quickstart

Installation

Install using your package manager.

npm install @vercel/flags

Then create an environment variable called FLAGS_SECRET.

The FLAGS_SECRET value must have a specific length (32 random bytes encoded in base64) to work as an encryption key. Create one using node:

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

This secret is required to use the SDK. It is used to read overrides and to encrypt flag values in case they are sent to the client and should stay secret.

This secret will also be used in case you are using the Flags Explorer in the Vercel Toolbar.

Declaring a feature flag

Create a file called flags.ts in your project.
Then declare your first feature flag there.

import { flag } from '@vercel/flags/next';

export const exampleFlag = flag({
  key: "example-flag",
  decide() {
    return false;
  }
});

The feature flags declared here should only ever be used server-side.

Using your first feature flag

Using a feature flag in a React Server Component.

import { exampleFlag } from '../../flags';

export default async function Page() {
  const example = await exampleFlag();
  return <div>{example ? 'Example' : 'No Example'}</div>;
}

Feature Flags can also be used in Edge Middleware or API Routes.

This was just the beginning

There is way more to the Flags SDK than shown in this quickstart. Make sure to explore the Concepts to learn how to target inidivual users, how to use feature flags for static pages, how to integrate feature flag providers using adapters and much more.