nextjs-app-router

Integrate PostHog analytics into Next.js App Router applications.

2|1|Updated Jul 15, 2022

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

Ready to run

npx skills add https://github.com/homostellaris/starfocus --skill nextjs-app-router-homostellaris

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

PostHog integration for Next.js App Router applications provides a guided pattern to instrument analytics, identify users, and correlate client and server events across the app router.

Core Features & Use Cases

Client-side event capture using posthog-js in App Router components and pages under src/app.
Server-side analytics via a PostHog Node client for API routes (e.g., app/api/**/route.ts) to track server events.
End-to-end workflows including login, identify users, error tracking, and feature-flag usage with cross-platform consistency.

Quick Start

Install PostHog in your Next.js App Router project, set environment variables, and implement the provided integration pattern to start capturing events.

Frequently Asked Questions about 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?▼

Integrate PostHog analytics into a Next.js App Router application by installing PostHog clients, setting environment variables for keys, and implementing event capture patterns in src/app components and API route handlers to track client and server events.

Can I track server-side events in Next.js App Router API routes using PostHog?▼

Yes, you can track server-side events in Next.js App Router API routes using a PostHog Node client. This allows you to capture server events directly within your app/api route.ts files for cross-platform analytics consistency.

How does user identification work across client and server events in Next.js?▼

User identification works across client and server events by correlating user data through PostHog. The integration pattern ensures end-to-end workflows like login and error tracking maintain cross-platform consistency for identified users.

What do I need to set up before adding PostHog event tracking to my Next.js project?▼

Before adding PostHog event tracking, you need a Next.js App Router project with the src/app structure and route.ts files. You also need to configure environment variables for your PostHog keys to authenticate the analytics clients.

Does this PostHog integration pattern support feature flags in Next.js App Router?▼

Yes, the PostHog integration pattern supports feature flag usage within Next.js App Router applications. It provides end-to-end workflows that include feature-flag evaluation alongside event tracking and user identification.