From the creators of Next.js, the Flags SDK is a free open-source library for implementing feature flags and A/B tests in your applications.

• Works with any flag provider or custom setup.
• Compatible with App Router, Pages Router, and Middleware.

Install the Flags SDK using your preferred package manager:

If you use an AI coding assistant, we recommend installing the Flags SDK agent skill:

npx skills add vercel/flags --skill flags-sdk

Create a flags.ts file in your project and declare a feature flag there:

import { flag } from 'flags/next';

export const exampleFlag = flag({
  key: 'example-flag',
  decide() {
    return Math.random() > 0.5;
  },
});

This produces an exampleFlag function.

If you're using the App Router, you can call the flag function from a page, component, or middleware to evaluate the flag.

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

export default async function Page() {
  const example = await exampleFlag();

  return <div>{example ? 'Flag is on' : 'Flag is off'}</div>;
}

That's it! Run next dev and open your browser to see the "Flag is on" or "Flag is off" text.

Pages Router

If you're using the Pages Router, you can call the flag function inside getServerSideProps and pass the values to the page as props.

import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'
import { exampleFlag } from '../flags';

export const getServerSideProps = (async ({ req }) => {
  const example = await exampleFlag(req);
  return { props: { example } };
}) satisfies GetServerSideProps<{ example: boolean }>;

export default function Page({
  example
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return <div>{example ? 'Flag is on' : 'Flag is off'}</div>;
}

That's it! Run next dev and open your browser to see the "Flag is on" or "Flag is off" text.

The Flags Explorer is a feature of the Vercel Toolbar which allows overriding feature flags for your session only, without affecting your team members. The Flags SDK will automatically respect overrides set by the Flags Explorer.

This is useful when working with feature flags, as you can try out different states without actually changing the feature flag configuration in the flag provider.