integration-nextjs-app-router

Integrate PostHog analytics into Next.js App Router applications.

43|32|Updated May 6, 2025
One-click install
npx skills add https://github.com/unicorn-mafia/unicorn-mafia --skill integration-nextjs-app-router-unicorn-mafia
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: integration-nextjs-app-router
Source: https://github.com/unicorn-mafia/unicorn-mafia/tree/main/.claude/skills/posthog-integration-nextjs-app-router
Command: npx skills add https://github.com/unicorn-mafia/unicorn-mafia --skill integration-nextjs-app-router-unicorn-mafia

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Adds a standardized PostHog analytics integration to Next.js App Router projects so teams can consistently capture client and server events, identify users across domains, and enable feature flags and error tracking without reorganizing the app.

Core Features & Use Cases

  • Client instrumentation: initialize posthog in instrumentation-client.ts for consistent client-side event capture and feature flag hooks.
  • Server-side tracking: provide a server PostHog client with flush and shutdown semantics for API routes and server captures.
  • Identification & correlation: patterns for calling identify(), passing distinct IDs and session headers to server endpoints, and resetting on logout to maintain correct user linkage.
  • Error tracking & event patterns: recommended places to capture exceptions and design event names for actionable analytics.

Quick Start

Initialize PostHog using environment variables and follow the example instrumentation-client.ts and server client pattern to capture a login event and identify the user.

Frequently Asked Questions about integration-nextjs-app-router

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add PostHog analytics to a Next.js App Router project?

To add PostHog analytics to a Next.js App Router project, initialize the client in instrumentation-client.ts and configure a server-side client using environment variables. This setup captures client and server events, enables feature flags, and tracks errors across API routes and components.

Can I track server-side events with PostHog in Next.js 15+?

Yes, you can track server-side events with PostHog in Next.js 15+ by using a dedicated server-side PostHog client. This client includes flush and shutdown semantics to ensure events are properly captured in API routes and server components before execution ends.

What is the best way to identify users across domains in a Next.js PostHog integration?

The best way to identify users across domains in a Next.js PostHog integration is by calling identify(), passing distinct IDs, and forwarding session headers to server endpoints. Resetting identification on logout maintains correct user linkage across client and server captures.

How do feature flags and error tracking work with PostHog in Next.js?

Feature flags and error tracking work with PostHog in Next.js by initializing the client via instrumentation-client.ts for consistent hooks and capturing exceptions at recommended application boundaries. This allows actionable analytics without reorganizing the app structure.

Do I need environment variables to configure PostHog in a Next.js App Router application?

Yes, you need environment variables to configure PostHog in a Next.js App Router application. Environment-variable-based configuration securely initializes both the client instrumentation and the server-side PostHog client for cross-domain correlation and event capture.