Adding Feature Flags

Add Feature Flags

Use this skill when the user asks to add feature flags, feature toggles, gradual rollouts, or A/B testing.

Option A: PostHog Feature Flags (Recommended)

1. Install PostHog if not already present:

   npm install posthog-js
   

2. Use feature flags in code:

   import { useFeatureFlagEnabled } from "posthog-js/react";
   
   function MyComponent() {
     const showNewFeature = useFeatureFlagEnabled("new-checkout-flow");
     if (showNewFeature) return <NewCheckout />;
     return <OldCheckout />;
   }
   

3. Server-side evaluation — for server components or API routes:

   import { PostHog } from "posthog-node";
   
   const posthog = new PostHog(process.env.POSTHOG_API_KEY!);
   const isEnabled = await posthog.isFeatureEnabled("new-checkout-flow", userId);
   

4. Create flags in the PostHog dashboard — set up targeting rules based on user properties, percentage rollouts, or cohorts.

Option B: Simple Local Feature Flags

For projects that don't need a third-party service:

1. Create a flags config — lib/feature-flags.ts:

   export const FLAGS = {
     NEW_CHECKOUT: process.env.NEXT_PUBLIC_FF_NEW_CHECKOUT === "true",
     DARK_MODE: process.env.NEXT_PUBLIC_FF_DARK_MODE === "true",
   } as const;
   

2. Use in components:

   import { FLAGS } from "@/lib/feature-flags";
   
   function App() {
     return FLAGS.NEW_CHECKOUT ? <NewCheckout /> : <OldCheckout />;
   }
   

3. Add env vars — add flags to .env and .env.example:

   NEXT_PUBLIC_FF_NEW_CHECKOUT=false
   NEXT_PUBLIC_FF_DARK_MODE=true
   

Notes

• Use feature flags for all user-facing changes during rollout, not just experiments.
• Clean up stale flags — remove the flag and the old code path once a feature is fully rolled out.
• For server-side flags, cache the evaluation result to avoid per-request API calls.
• Name flags descriptively: new-checkout-flow not flag-1.