Rolling Out a New Feature

This workflow creates a feature flag, wires it into your application, and progressively enables it across environments.

vercel flags add redesigned-checkout --kind boolean \
  --description "New checkout flow with streamlined steps"

Each project gets SDK keys automatically when you create your first flag. Confirm they're in place:

vercel flags sdk-keys ls

The FLAGS environment variable contains your SDK keys. Pull it into your local .env.local:

vercel env pull

pnpm add flags @flags-sdk/vercel

Create a flag definition using the Flags SDK. The vercelAdapter reads the FLAGS environment variable automatically:

import { flag } from 'flags/next';
import { vercelAdapter } from '@flags-sdk/vercel';
 
export const redesignedCheckout = flag({
  key: 'redesigned-checkout',
  adapter: vercelAdapter(),
});

The flag returns false until you enable it in the dashboard.

import { redesignedCheckout } from '../../flags';
 
export default async function CheckoutPage() {
  const showRedesign = await redesignedCheckout();
 
  return showRedesign ? <NewCheckout /> : <OldCheckout />;
}

vercel deploy

Visit the preview URL to confirm the old checkout renders. The flag defaults to false since it hasn't been enabled yet.

Enable the flag progressively, starting with development:

vercel flags enable redesigned-checkout --environment development

vercel flags enable redesigned-checkout --environment preview

vercel flags enable redesigned-checkout --environment production

vercel deploy --prod

Visit the production URL to confirm the new checkout is live.