integration-nextjs-app-router

Name: integration-nextjs-app-router
Availability: InStock
Author: PostHog

Integrate PostHog analytics into Next.js App Router apps with client and server event capture.

58|5|Updated Jan 19, 2026

Search Tags:#analytics #nextjs #server-side #posthog #app-router #event-tracking #identify

Ready to run

npx skills add https://github.com/PostHog/skills --skill integration-nextjs-app-router-posthog

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: integration-nextjs-app-router
Source: https://github.com/PostHog/skills/tree/main/skills/posthog/integration/skills/nextjs-app-router
Command: npx skills add https://github.com/PostHog/skills --skill integration-nextjs-app-router-posthog

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This integration enables PostHog analytics for Next.js apps that use the App Router, combining client- and server-side tracking to provide a unified picture of user behavior across routes.

Core Features & Use Cases

App Router compatibility: Bootstraps PostHog in Next.js 15.3+ App Router and manages client and server tracking.
Server-side events: Utilizes posthog-node for server-side event capture (e.g., API routes, login flows) and proper shutdown.
User identification: Uses posthog.identify on login and server-side identify to link sessions across client and server.
Guidelines & best practices: Follows Next.js App Router patterns like instrumentation-client.ts and serverless considerations.

Quick Start

Install PostHog, configure your environment, and bootstrap client and server tracking using instrumentation-client.ts and a server-side PostHog client.

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

You can integrate PostHog analytics into a Next.js App Router application by wiring client-side event capture via instrumentation-client.ts and using the posthog-node SDK on the server to capture events from API routes and server components.

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

To capture server-side events in Next.js App Router, use the posthog-node SDK to capture events from API routes and server components, ensuring you properly shut down server runners in your server endpoints to maintain serverless compatibility.

How does user identification work with PostHog in Next.js server and client components?▼

User identification links sessions across client and server by using posthog.identify on the client side during login flows and applying server-side identify methods to unify user behavior tracking across the Next.js App Router.

Does PostHog work with Next.js 15.3+ App Router and serverless environments?▼

Yes, PostHog is compatible with Next.js 15.3+ App Router and manages client and server tracking while following serverless considerations like ensuring proper shutdown of server runners in serverless endpoints.

What is the best way to track user behavior across both client and server routes in Next.js?▼

The best way to track user behavior across Next.js routes is combining client-side initialization via instrumentation-client.ts with the posthog-node SDK on the server to provide a unified picture of user behavior.

Why do I need instrumentation-client.ts for PostHog event tracking in Next.js?▼

You need instrumentation-client.ts for PostHog event tracking in Next.js because it follows App Router patterns to bootstrap the client-side PostHog client, enabling seamless initialization and event capture across your application.