---
title: Quickstart
description: Learn how to start using the Flags SDK in your Next.js project.
---
# Quickstart
import Link from 'next/link';
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.
## Installation
Install the Flags SDK using your preferred package manager:
```sh title="Terminal"
npm install flags
```
If you use an AI coding assistant, we recommend installing the Flags SDK agent skill:
```sh title="Terminal"
npx skills add vercel/flags --skill flags-sdk
```
## Declaring a feature flag
Create a `flags.ts` file in your project and declare a feature flag there:
```tsx title="flags.ts#next"
import { flag } from 'flags/next';
export const exampleFlag = flag({
key: 'example-flag',
decide() {
return Math.random() > 0.5;
},
});
```
This produces an `exampleFlag` function.
## App Router
If you're using the App Router, you can call the flag function from a page, component, or middleware to evaluate the flag.
```tsx title="app/page.tsx"
import { exampleFlag } from '../flags';
export default async function Page() {
const example = await exampleFlag();
return
{example ? 'Flag is on' : 'Flag is off'}
;
}
```
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.
```tsx title="pages/index.tsx#next"
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) {
return
{example ? 'Flag is on' : 'Flag is off'}
;
}
```
That's it! Run `next dev` and open your browser to see the *"Flag is on"* or *"Flag is off"* text.
## Flags Explorer
The [Flags Explorer](https://vercel.com/docs/flags/flags-explorer) is a feature of the [Vercel Toolbar](https://vercel.com/docs/workflow-collaboration/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.
## Next steps