integration-nextjs-app-router
CommunityAdd PostHog analytics to Next.js App Router
Software Engineering#analytics#next.js#instrumentation#posthog#app-router#feature-flags#error-tracking
Authornicholasmartin
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This guide helps developers instrument Next.js App Router applications with PostHog so they can reliably capture client-side and server-side analytics, feature flags, and error tracking without restructuring their codebase.
Core Features & Use Cases
- Client initialization: Use instrumentation-client.ts for consistent client-side PostHog initialization and feature flag hooks.
- Server-side tracking: Provide a server PostHog client to capture API and authentication events from app/api routes.
- Identity correlation & error tracking: Best practices to call identify() on login/logout, pass distinct IDs to server requests, and capture exceptions around critical flows.
- Use Case: Instrument login endpoints and key user actions to build conversion funnels, correlate server and client events, and capture errors for triage.
Quick Start
Initialize PostHog in instrumentation-client.ts with your NEXT_PUBLIC_POSTHOG_KEY and configure a server PostHog client using NEXT_PUBLIC_POSTHOG_HOST to capture login and API events.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: integration-nextjs-app-router Download link: https://github.com/nicholasmartin/peerpull/archive/main.zip#integration-nextjs-app-router Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.