用途:在 Next.js 项目中端到端接入 PostHog 功能开关,涵盖服务端求值、客户端 Hook 与本地开发覆盖。会先读取项目,若已有 PostHog 配置则在其上扩展。
主要能力:安装 posthog-node 服务端 SDK;创建服务端单例与 isFeatureEnabled()、getFeatureFlagVariant() 辅助函数;在 Server Component 和路由处理器中求值开关;在客户端用 useFeatureFlagEnabled 处理交互后的 UI;通过 FLAG_* 环境变量在开发环境强制开关取值。
必要的检测与安装:运行 cat package.json | grep -E "posthog" 与 grep -r "posthog" src/ app/ ... 判断现状;执行 npm install posthog-node。环境变量包含 NEXT_PUBLIC_POSTHOG_KEY 与 POSTHOG_API_KEY(与 POSTHOG_KEY 相同,用于服务端调用)。
关键限制:需要服务端行为时不要在客户端求值开关——useFeatureFlagEnabled 在 hydration 后才运行,会导致首屏闪烁或布局偏移;首屏内容用服务端求值。服务端调用必须传真实用户标识,不能用 anonymous 之类的占位值,否则未认证用户会得到同一变体。客户端 Hook 在首次渲染返回 undefined,应判空处理,且只用于交互后的 UI,不用于初始渲染。
使用方式(按资料):创建 lib/posthog-server.ts 单例,flushAt 设为 1、flushInterval 设为 0 以适应无服务端场景;在 Server Component 与 route handler 中调用 isFeatureEnabled(flagKey, distinctId, groups?);A/B 测试使用 Multiple Variants 并通过 getFeatureFlagVariant() 返回 control 或 test;本地通过在 .env.local 设置 FLAG_NEW_DASHBOARD=true / FLAG_STREAMING_RESPONSES=false 等方式覆盖。
PostHog 后台步骤:Feature Flags → New Feature Flag,Key 与代码一致,Rollout 从 0% 逐步提升到 10%、50%、100%,可按用户属性、cohort 或百分比定向。
限制与缺失:资料未说明价格、收费模式、平台覆盖范围或效果数据,这些内容暂未提供。验证清单包括 posthog-node 安装、POSTHOG_API_KEY 写入 .env.example、服务端使用真实用户 ID、Server Component 使用 isFeatureEnabled、客户端 Hook 仅用于 hydration 后交互、FLAG_* 覆盖生效、后台开关 key 匹配,以及先以 0% 发布再扩大。