We’re introducing a new approach for working with feature flags. This approach allows declaring feature flags in code and calling them as functions. Flags implemented using this pattern can automatically respect overrides set by the Vercel Toolbar, and integrate with our Developer Experience Platform features like Web Analytics and Runtime Logs.

import { unstable_flag as flag } from "@vercel/flags/next"

const showSummerSale = flag ( {

key : "summer-sale" ,

decide : async ( ) => false

} )

Declaring a feature flag

The pattern avoids common pitfalls of client-side feature flag and experimentation usage, such as flashing the wrong experiment, loading spinners, layout shift, and jank. It works with any feature flag provider and even custom setups.

export const showSummerSale = flag < boolean > ( {

key : 'summer-sale' ,

async decide ( ) {

return getLaunchDarklyClient ( ) . variation ( this .…