integration-nextjs-app-router

Name: integration-nextjs-app-router
Availability: InStock
Author: COCOSiL-inc

Integrate PostHog event capture and error tracking into Next.js App Router applications.

1|Updated Mar 22, 2026

Search Tags:#feature flags #error tracking #posthog #user identification #analytics instrumentation #nextjs app router

Ready to run

npx skills add https://github.com/COCOSiL-inc/COCOSiL_Analysis_V2 --skill integration-nextjs-app-router-cocosil-inc

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: integration-nextjs-app-router
Source: https://github.com/COCOSiL-inc/COCOSiL_Analysis_V2/tree/main/.claude/skills/integration-nextjs-app-router
Command: npx skills add https://github.com/COCOSiL-inc/COCOSiL_Analysis_V2 --skill integration-nextjs-app-router-cocosil-inc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It enables reliable event analytics by wiring PostHog into Next.js App Router so user actions, identifications, and errors are captured consistently for product insights.

Core Features & Use Cases

Step-by-step PostHog setup workflow: Guide you through beginning, editing, revising, and concluding the integration using an opinionated process and a reference example.
Next.js App Router–aware initialization: Uses the correct initialization strategy for Next.js 15.3+ via instrumentation-client.ts and supports feature flag hooks behavior.
Action-focused tracking with correct user identity correlation: Captures events in user action handlers (not useEffect), identifies users during auth flows, and enables correlation between client and server events.
Error tracking and routing compatibility: Adds exception capture for critical flows and supports reverse-proxy routing considerations for PostHog assets endpoints.

Quick Start

Ask an AI assistant to integrate PostHog into your Next.js App Router by following the skill steps starting with basic-integration-1.0-begin and using the provided Next.js example project as the implementation pattern.

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 integrate PostHog analytics into a Next.js App Router application?▼

PostHog setup for Next.js App Router uses instrumentation-client.ts for initialization and captures events directly in user action handlers rather than useEffect. It identifies users during auth flows and links client and server events using matching distinct IDs.

How do I track server-side events in Next.js App Router with PostHog?▼

You track server-side events in Next.js App Router by using the posthog-node library with matching distinct IDs. This approach ensures that server-side analytics correlate correctly with client-side user identification for reliable product insights.

Does PostHog feature flag usage work with Next.js 15.3+ App Router?▼

Yes, PostHog feature flag usage works with Next.js 15.3+ App Router by leveraging the correct initialization strategy via instrumentation-client.ts. This setup supports feature flag hooks behavior for consistent evaluation across your application.

What is the best way to capture user identification events during Next.js login flows?▼

The recommended approach is to identify users directly within the authentication action handlers rather than using useEffect. This method ensures user identification correlates accurately between client and server events using matching distinct IDs.

How do I add error tracking to critical user actions in Next.js using PostHog?▼

You add error tracking to critical user actions in Next.js by implementing exception capture alongside your event instrumentation. This captures errors consistently within critical flows like onboarding and login for reliable product insights.

Can I use PostHog with a reverse proxy for Next.js App Router assets?▼

Yes, you can use PostHog with a reverse proxy by applying routing compatibility considerations for PostHog assets endpoints. This ensures analytics assets load correctly while maintaining your existing proxy infrastructure.