Recipe: Add a feature flag
Recipe: Add a feature flag
- Add an entry to
KNOWN_FLAGSinlib/flags.ts:{ key: "new-thing", description: "What flipping this off/on actually does.", defaultValue: false, } - Check it wherever the behavior branches — a Server Component page or
layout:
import { getFlag } from "@/lib/flags"; const newThingEnabled = await getFlag("new-thing", false);getFlagiscache()-wrapped, so checking the same key from both a layout and the page it wraps only costs one query per request. - That's it —
/admin/flagspicks up the new entry automatically (it renders one toggle perKNOWN_FLAGSitem, reading each one's current value withgetFlag). - Verify:
npm run build, then in the browser toggle the new flag at/admin/flagsand confirm the row updates in place (no reload needed —setFlagcallsrevalidatePath("/admin/flags")), then confirm the behavior actually changed on the page(s) that check it.