integration-nextjs-app-router

Integrate PostHog analytics into Next.js App Router applications.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/nicholasmartin/peerpull --skill integration-nextjs-app-router
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: integration-nextjs-app-router
Source: https://github.com/nicholasmartin/peerpull/tree/main/.claude/skills/posthog-integration-nextjs-app-router
Command: npx skills add https://github.com/nicholasmartin/peerpull --skill integration-nextjs-app-router

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

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?

You can add PostHog analytics by initializing the client in instrumentation-client.ts and configuring a posthog-node server client using NEXT_PUBLIC_POSTHOG_KEY and NEXT_PUBLIC_POSTHOG_HOST environment variables.

How do I track server-side API events with PostHog in Next.js?

Track server-side API events with PostHog in Next.js by creating a posthog-node server client to capture events from app/api routes. Pass distinct IDs to correlate these server-side captures with client-side user sessions.

Does PostHog support feature flags in the Next.js App Router?

Yes, PostHog supports feature flags in the Next.js App Router. You can access feature flag hooks by properly initializing the PostHog client within your instrumentation-client.ts file for consistent client-side evaluation.

How do I correlate client and server-side PostHog events for user authentication flows?

Correlate client and server PostHog events by calling identify() during login/logout and passing distinct IDs to server requests. This links user authentication actions across client and API routes for unified tracking.

What environment variables are required for PostHog error tracking in Next.js?

The required environment variables for PostHog error tracking in Next.js are NEXT_PUBLIC_POSTHOG_KEY and NEXT_PUBLIC_POSTHOG_HOST. You use these to initialize clients and capture exceptions around critical user flows.