Skip to content
Dashboard

Vercel Flags: Platform-native feature flags

Link to headingWhat is Vercel Flags

The Vercel Flags dashboard showing a list of active feature flags with their current values and types across Production, Preview, and Development environmentsThe Vercel Flags dashboard showing a list of active feature flags with their current values and types across Production, Preview, and Development environments
Active flags across environments, each with their current value and type.

Link to headingWhy framework-native matters

Link to headingServer-side evaluation

app/page.tsx
import { showNewFeature } from "@/flags"
export default async function Page() {
const isEnabled = await showNewFeature()
return isEnabled ? <NewDashboard /> : <OldDashboard />
}

Reading the flag server-side in a route. The user receives the correct variant before the page paints.

Link to headingAutomatic flag registration

flags.ts
import { flag } from "flags/next"
import { vercelAdapter } from "@flags-sdk/vercel"
export const showNewFeature = flag({
key: "show-new-feature",
adapter: vercelAdapter()
})

Defining a flag with the Flags SDK and the Vercel adapter.

Link to headingPrecompute

Link to headingAgent-native flag management

Link to headingOverriding flags in the browser

Link to headingVercel ships on Vercel Flags

Link to headingGet started