Rolling out a new feature

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

vercel flags create 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(),
});

A new boolean flag serves true in development and false in preview and production. That lets you build against the new checkout locally while preview and production keep serving the old flow.

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. Preview still serves false until you enable the flag there.

When the preview deployment looks good, enable the flag there:

vercel flags enable redesigned-checkout --environment preview \
  --message "Start preview rollout"

Visit the preview URL again to confirm the new checkout renders.

vercel deploy --prod

vercel flags enable redesigned-checkout --environment production \
  --message "Roll out redesigned checkout in production"

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