Live demo — shared accounts, sample data, reset regularly. Don't enter anything real.Get the source

Recipe: Add a feature flag

Recipe: Add a feature flag

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