Quickstart

Add feature flags and A/B tests to your application with the Flags SDK, a free, open-source library from the creators of Next.js.
Add Flags SDK to my existing Next.js app. Create a flags.ts file with a typed feature flag using flags/next, use the flag in an App Router page or Pages Router page based on my app structure, add the Flags Explorer discovery endpoint at app/.well-known/vercel/flags/route.ts, and run the relevant type checks or build when finished.
Install the Flags SDK using your preferred package manager:
If you use an AI coding assistant, we recommend installing the Flags SDK agent skill:
Create a flags.ts file in your project and declare a feature flag there:
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.
Run next dev and open your browser to see the "Flag is on" or "Flag is off" text.
If you're using the Pages Router, you can call the flag function inside getServerSideProps and pass the values to the page as props.
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.
Your browser does not support the video tag.