adding-feature-flags

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Add Feature Flags

添加功能标志

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

当用户要求添加功能标志、功能开关、逐步发布或A/B测试时，使用此技能。

Option A: PostHog Feature Flags (Recommended)

选项A：PostHog功能标志（推荐）

Install PostHog if not already present:
bash
```
npm install posthog-js
```

Use feature flags in code:

tsx

import { useFeatureFlagEnabled } from "posthog-js/react";

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

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);

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

安装PostHog（如果尚未安装）：
bash
```
npm install posthog-js
```

在代码中使用功能标志：

tsx

import { useFeatureFlagEnabled } from "posthog-js/react";

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

服务器端评估 —— 适用于服务器组件或API路由：

import { PostHog } from "posthog-node";

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

在PostHog控制台创建标志 —— 根据用户属性、百分比发布或用户群体设置目标规则。

Option B: Simple Local Feature Flags

选项B：简单本地功能标志

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

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;

Use in components:

tsx

import { FLAGS } from "@/lib/feature-flags";

function App() {
  return FLAGS.NEW_CHECKOUT ? <NewCheckout /> : <OldCheckout />;
}

Add env vars — add flags to

.env

and

.env.example

NEXT_PUBLIC_FF_NEW_CHECKOUT=false
NEXT_PUBLIC_FF_DARK_MODE=true

适用于不需要第三方服务的项目：

创建标志配置 ——

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;

在组件中使用：

tsx

import { FLAGS } from "@/lib/feature-flags";

function App() {
  return FLAGS.NEW_CHECKOUT ? <NewCheckout /> : <OldCheckout />;
}

添加环境变量 —— 将标志添加到

.env

和

.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
```
.

在发布期间，所有面向用户的变更都应使用功能标志，而不仅仅是实验。
清理过期标志 —— 一旦功能完全发布，移除标志和旧代码路径。
对于服务器端标志，缓存评估结果以避免每次请求都调用API。
给标志起描述性名称：使用
```
new-checkout-flow
```
而非
```
flag-1
```
。