skills.rest
Volcar144
Volcar144COMMUNITY
Explore all skills by this author →
GitHub

integration-nextjs-app-router

Integrate PostHog analytics into Next.js App Router applications.

Updated Feb 23, 2026
Search Tags:#analytics#instrumentation#nextjs#server-side#posthog#app-router#feature-flags
One-click install
npx skills add https://github.com/Volcar144/funplayground --skill integration-nextjs-app-router-volcar144
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: integration-nextjs-app-router
Source: https://github.com/Volcar144/funplayground/tree/main/playgrounddd/.claude/skills/posthog-integration-nextjs-app-router
Command: npx skills add https://github.com/Volcar144/funplayground --skill integration-nextjs-app-router-volcar144

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill guides developers through integrating PostHog analytics into Next.js applications that use the App Router, reducing friction when adding client instrumentation, server-side event capture, feature flags, session replay, and error tracking.

Core Features & Use Cases

  • Client initialization: Use instrumentation-client.ts to initialize posthog-js consistently across client components and hooks.
  • Server-side tracking: Provide a reusable posthog-node client pattern (getPostHogClient) with immediate flushing for API routes and server events.
  • User correlation & error tracking: Best-practice identify and reset patterns on login/logout, headers to propagate distinct IDs to server endpoints, and capture exceptions around critical flows.
  • Deployment guidance: Environment variable usage, reverse-proxy rewrites, and Next.js App Router specifics to avoid common pitfalls.

Quick Start

Initialize PostHog by adding instrumentation-client.ts that calls posthog.init and configure NEXT_PUBLIC_POSTHOG_KEY and NEXT_PUBLIC_POSTHOG_HOST in your environment variables.

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 posthog-js in an instrumentation-client.ts file and configure the NEXT_PUBLIC_POSTHOG_KEY and NEXT_PUBLIC_POSTHOG_HOST environment variables for client-side tracking.

What is the best way to track server-side events in Next.js App Router API routes?▼

Server-side event tracking in Next.js API routes uses a reusable posthog-node client pattern called getPostHogClient, which ensures immediate event flushing for accurate server-side capture without data loss.

How do I correlate user identities across client and server in Next.js?▼

User correlation across client and server requires implementing identify and reset patterns on login/logout, and passing distinct user IDs via headers to your server endpoints to maintain tracking state.

Does PostHog feature flags work with Next.js App Router?▼

PostHog feature flags work with Next.js App Router by utilizing the posthog-js client instrumentation and server-side posthog-node initialization to evaluate flags consistently across your application.

How do I configure environment variables for PostHog in Next.js?▼

PostHog configuration in Next.js requires setting NEXT_PUBLIC_POSTHOG_KEY and NEXT_PUBLIC_POSTHOG_HOST environment variables, and optionally using reverse-proxy rewrites to avoid common integration pitfalls.

Related Skills

Explore More Software Engineering Skills→
omerakbenomerakben
1

nextjs-app-router

Instrument Next.js App Router apps with PostHog analytics for client and server events.

Community
Advanced
PostHogPostHog
58

integration-vue-3

Instrument PostHog analytics in Vue 3 apps with initialization, identify, and event capture.

Official
Intermediate
MaxStrootmannMaxStrootmann

integration-nextjs-app-router

Integrate PostHog analytics into Next.js App Router applications.

Community
Intermediate
kausthubh-coderkausthubh-coder

posthog-instrumentation

Implement PostHog event tracking, user identification, and feature flags in Next.js and Convex.

Community
Intermediate