feature-flags-nextjs | SkillBundle

PostHog feature flags for Next.js

This skill helps you add PostHog feature flags to Next.js applications.

Reference files

references/react.md - React feature flags installation - docs
references/next-js.md - Next.js - docs
references/adding-feature-flag-code.md - Adding feature flag code - docs
references/best-practices.md - Feature flag best practices - docs

Consult the documentation for API details and framework-specific patterns.

Key principles

Environment variables: Always use environment variables for PostHog keys. Never hardcode them.
Minimal changes: Add feature flag code alongside existing logic. Don't replace or restructure existing code.
Boolean flags first: Default to boolean flag checks unless the user specifically asks for multivariate flags.
Server-side when possible: Prefer server-side flag evaluation to avoid UI flicker.

PostHog MCP tools

Check if a PostHog MCP server is connected. If available, look for tools related to feature flag management (creating, listing, updating, deleting flags). Use these tools to manage flags directly in PostHog rather than requiring the user to do it manually in the dashboard.

Framework guidelines

For Next.js 15.3+, initialize PostHog in instrumentation-client.ts for the simplest setup
The PostHog React hooks (useFeatureFlagEnabled, useFeatureFlagPayload) work WITHOUT PostHogProvider if posthog-js is already initialized (e.g., via instrumentation-client.ts)
In client components, import and use hooks directly - the React context defaults to the posthog-js singleton
Do NOT wrap components in PostHogProvider just for feature flags - it's unnecessary if posthog-js is initialized globally
Server Components and Route Handlers cannot use React hooks - use posthog-node SDK instead
Create a server-side PostHog client with posthog-node, call getAllFlags() or getFeatureFlag(), then await posthog.shutdown()
Pass flag values from server to client components as props to avoid hydration mismatches
For flags that affect initial render, evaluate server-side and pass as props to prevent UI flicker
Client-side hooks may return undefined initially while flags load - handle this loading state
For feature flags, use useFeatureFlagEnabled() or useFeatureFlagPayload() hooks - they handle loading states and external sync automatically
Add analytics capture in event handlers where user actions occur, NOT in useEffect reacting to state changes
Do NOT use useEffect for data transformation - calculate derived values during render instead
Do NOT use useEffect to respond to user events - put that logic in the event handler itself
Do NOT use useEffect to chain state updates - calculate all related updates together in the event handler
Do NOT use useEffect to notify parent components - call the parent callback alongside setState in the event handler
To reset component state when a prop changes, pass the prop as the component's key instead of using useEffect
useEffect is ONLY for synchronizing with external systems (non-React widgets, browser APIs, network subscriptions)

PostHog feature flags for Next.js

This skill helps you add PostHog feature flags to Next.js applications.

Reference files

references/react.md - React feature flags installation - docs
references/next-js.md - Next.js - docs
references/adding-feature-flag-code.md - Adding feature flag code - docs
references/best-practices.md - Feature flag best practices - docs

Consult the documentation for API details and framework-specific patterns.

Key principles

Environment variables: Always use environment variables for PostHog keys. Never hardcode them.
Minimal changes: Add feature flag code alongside existing logic. Don't replace or restructure existing code.
Boolean flags first: Default to boolean flag checks unless the user specifically asks for multivariate flags.
Server-side when possible: Prefer server-side flag evaluation to avoid UI flicker.

PostHog MCP tools

Framework guidelines

For Next.js 15.3+, initialize PostHog in instrumentation-client.ts for the simplest setup
The PostHog React hooks (useFeatureFlagEnabled, useFeatureFlagPayload) work WITHOUT PostHogProvider if posthog-js is already initialized (e.g., via instrumentation-client.ts)
In client components, import and use hooks directly - the React context defaults to the posthog-js singleton
Do NOT wrap components in PostHogProvider just for feature flags - it's unnecessary if posthog-js is initialized globally
Server Components and Route Handlers cannot use React hooks - use posthog-node SDK instead
Create a server-side PostHog client with posthog-node, call getAllFlags() or getFeatureFlag(), then await posthog.shutdown()
Pass flag values from server to client components as props to avoid hydration mismatches
For flags that affect initial render, evaluate server-side and pass as props to prevent UI flicker
Client-side hooks may return undefined initially while flags load - handle this loading state
For feature flags, use useFeatureFlagEnabled() or useFeatureFlagPayload() hooks - they handle loading states and external sync automatically
Add analytics capture in event handlers where user actions occur, NOT in useEffect reacting to state changes
Do NOT use useEffect for data transformation - calculate derived values during render instead
Do NOT use useEffect to respond to user events - put that logic in the event handler itself
Do NOT use useEffect to chain state updates - calculate all related updates together in the event handler
Do NOT use useEffect to notify parent components - call the parent callback alongside setState in the event handler
To reset component state when a prop changes, pass the prop as the component's key instead of using useEffect
useEffect is ONLY for synchronizing with external systems (non-React widgets, browser APIs, network subscriptions)