skills.rest
jpmoya
jpmoyaCOMMUNITY
Explore all skills by this author →
GitHub

integration-nextjs-app-router

Integrates PostHog analytics, user identification, and error tracking into Next.js App Router applications.

Updated Sep 1, 2026
Search Tags:#analytics#next.js#event tracking#app router#error tracking#posthog#user identification
One-click install
npx skills add https://github.com/jpmoya/claude-agents --skill integration-nextjs-app-router-jpmoya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: integration-nextjs-app-router
Source: https://github.com/jpmoya/claude-agents/tree/main/skills/integration-nextjs-app-router
Command: npx skills add https://github.com/jpmoya/claude-agents --skill integration-nextjs-app-router-jpmoya

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires posthog-js, posthog-node, and includes references (resource) components.

What problem does it solve? Adding product analytics to a Next.js App Router project requires correct client and server SDK setup, event instrumentation, and user identification, which is easy to get wrong without a guided process. ## Core Features & Use Cases - Guided four-phase integration: Plans events in a .posthog-events.json file, implements capture calls, reviews and lints the changes, then builds a PostHog dashboard and setup report. - Client and server coverage: Initializes posthog-js via instrumentation-client.ts, sets up a posthog-node server client, and configures a reverse proxy through Next.js rewrites. - User identification and error tracking: Adds identify() calls on login and signup, correlates client and server sessions via distinct ID headers, and captures exceptions around critical flows. - Use Case: Point the skill at an existing Next.js App Router codebase and receive instrumented event tracking, a configured "Analytics basics" dashboard, and a posthog-setup-report.md summarizing every change. ## Quick Start Add PostHog analytics with event tracking, user identification, and error tracking to my Next.js App Router project.

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 app?▼

Initialize posthog-js in an instrumentation-client.ts file at the project root using your project token from environment variables. For Next.js 15.3+, this is the recommended setup and should not be combined with a PostHogProvider component.

How do I track server-side events in Next.js API routes?▼

Use the posthog-node SDK with a singleton client configured with flushAt set to 1 and flushInterval set to 0 so events send immediately from short-lived server functions. Capture events in route handlers such as app/api/auth/login/route.ts with a matching distinct ID.

Does PostHog support user identification across client and server in Next.js?▼

Yes. Call posthog.identify() on the client during login or signup, and pass the client-side session and distinct ID to the server using X-POSTHOG-DISTINCT-ID and X-POSTHOG-SESSION-ID headers so backend events correlate with the same user.

Should I use useEffect to capture PostHog events in React components?▼

No. Capture analytics in event handlers where user actions occur, not in useEffect reacting to state changes. Reserve useEffect for synchronizing with external systems only, and use feature flag hooks like useFeatureFlagEnabled for flag logic.

How do I avoid ad blockers intercepting PostHog events in Next.js?▼

Set up a reverse proxy using Next.js rewrites that route an /ingest path to the PostHog ingestion host, and enable skipTrailingSlashRedirect in next.config. Point posthog.init at the proxy path as api_host.

Related Skills

Explore More Software Engineering Skills→
FrekiManagarmFrekiManagarm

error-tracking-nextjs

Integrate PostHog error tracking into Next.js applications with source maps.

Community
Intermediate
petekppetekp
5

posthog-analytics

Analyze PostHog MCP data to surface product insights and recommendations.

Community
Advanced
baasith6baasith6

adding-feature-flags

Integrate feature flags with PostHog, LaunchDarkly, or local implementations.

Community
Intermediate
FlexasaurusrexFlexasaurusrex
16

pulsecheck

Query website analytics from Google Analytics, Plausible, Fathom, Mixpanel, and PostHog via Telegram or CLI.

Community
Intermediate