Why does the skill recommend against using useEffect for tracking?

To prevent data inconsistencies and maintain React best practices, it advises capturing analytics in event handlers where user actions occur, rather than reacting to state changes.

Does this skill support the latest versions of Next.js?

Yes, it includes specific guidelines for Next.js 15.3 and above, recommending the use of instrumentation-client.ts for the simplest and most robust setup.

Can I track users across both frontend and backend?

Yes, the skill provides patterns for passing distinct and session IDs via custom headers (X-POSTHOG-DISTINCT-ID) to maintain identity correlation.

How does it handle feature flags in React components?

It utilizes useFeatureFlagEnabled() and useFeatureFlagPayload() hooks which are designed to handle loading states and external synchronization automatically.

PostHog Next.js App Router Integration

Name: PostHog Next.js App Router Integration
Author: unicorn-mafia

byunicorn-mafia

•

分析与监控

Integrates PostHog analytics, feature flags, and user identification into Next.js App Router applications.

This skill provides a comprehensive framework for adding PostHog's product suite to Next.js App Router projects, ensuring high-performance tracking and reliable data collection. It guides developers through a structured four-step integration process, covering everything from initial setup in Next.js 15.3+ instrumentation files to advanced user identification patterns across client and server boundaries. By enforcing React best practices—such as event-driven tracking instead of state-reactive tracking—it helps maintain clean code while ensuring accurate analytics and seamless feature flag deployments.

主要功能

01Optimized PostHog initialization for Next.js 15.3+ (instrumentation-client.ts)

02Next.js App Router-specific implementation patterns

03Feature flag integration with automatic loading state management

04Cross-boundary user identification with session correlation

05Pre-configured error tracking for critical user flows and API boundaries

0637 GitHub stars

使用场景

01Synchronizing user identity between client-side interactions and server-side actions

02Implementing product analytics in a new or existing Next.js App Router project

03Deploying A/B tests and feature flags using PostHog hooks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add unicorn-mafia/unicorn-mafia posthog-integration-nextjs-app-router

For use in Claude.ai and ChatGPT

主要功能

01Optimized PostHog initialization for Next.js 15.3+ (instrumentation-client.ts)

02Next.js App Router-specific implementation patterns

03Feature flag integration with automatic loading state management

04Cross-boundary user identification with session correlation

05Pre-configured error tracking for critical user flows and API boundaries

0637 GitHub stars

使用场景

01Synchronizing user identity between client-side interactions and server-side actions

02Implementing product analytics in a new or existing Next.js App Router project

03Deploying A/B tests and feature flags using PostHog hooks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add unicorn-mafia/unicorn-mafia posthog-integration-nextjs-app-router

For use in Claude.ai and ChatGPT