adding-feature-flags

用途

当用户要求添加功能开关（feature flags）、功能切换（feature toggles）、渐进式发布（gradual rollouts）或 A/B 测试时，可使用本技能。功能开关可用于所有面向用户的变更发布，而不仅限于实验场景。

主要方案

方案 A：PostHog 功能开关（推荐） 如尚未安装 PostHog，先安装：

npm install posthog-js

前端使用（React Hook）：

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

function MyComponent() { const showNewFeature = useFeatureFlagEnabled("new-checkout-flow"); if (showNewFeature) return ; return ; }

服务端评估（用于服务端组件或 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 仪表盘中创建开关，可基于用户属性、百分比发布或用户群组设置定向规则。

方案 B：简单的本地功能开关 适用于不需要第三方服务的项目。

创建开关配置——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;

在组件中使用：

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

注意事项

发布期间所有面向用户的变更都应使用功能开关，而不仅是实验。
及时清理废弃开关：功能完全发布后，移除开关和旧代码路径。
服务端开关应缓存评估结果，避免每个请求都调用 API。
使用描述性命名，例如 new-checkout-flow，而非 flag-1。

技能介绍

用途

主要方案

注意事项