skills.rest
EthGlobalBangkok
EthGlobalBangkokOFFICIAL
Explore all skills by this author →
GitHub

integration-nextjs-app-router

Integrate PostHog analytics into Next.js App Router with client and server instrumentation.

1|1|Updated Jul 25, 2025
Search Tags:#analytics#next.js#instrumentation#posthog#app-router#feature-flags#error-tracking
One-click install
npx skills add https://github.com/EthGlobalBangkok/polyswap-dapp --skill integration-nextjs-app-router-ethglobalbangkok
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: integration-nextjs-app-router
Source: https://github.com/EthGlobalBangkok/polyswap-dapp/tree/main/.claude/skills/posthog-integration-nextjs-app-router
Command: npx skills add https://github.com/EthGlobalBangkok/polyswap-dapp --skill integration-nextjs-app-router-ethglobalbangkok

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This integration removes the friction of adding product analytics, error tracking, and feature flagging to Next.js App Router projects by providing clear client-side and server-side instrumentation patterns and example code.

Core Features & Use Cases

  • Client-side initialization: Shows how to initialize posthog-js in instrumentation-client.ts for consistent client analytics and feature flag hooks.
  • Server-side tracking: Demonstrates posthog-node usage for API routes and server events with immediate flush and shutdown patterns.
  • Identify & error tracking: Covers user identification across client and server, reset on logout, and capturing exceptions for observability.
  • Use Case: Add PostHog to a Next.js 15+ app to capture login events, feature flag evaluations, session replay, and server-side API actions for reliable analytics.

Quick Start

Set the NEXT_PUBLIC_POSTHOG_KEY and NEXT_PUBLIC_POSTHOG_HOST environment variables, add client initialization to instrumentation-client.ts, and wire server-side tracking using a shared posthog client in lib/posthog-server.ts.

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 instrumentation-client.ts for client-side tracking and configure posthog-node in a shared server file for API route events. Set the NEXT_PUBLIC_POSTHOG_KEY and HOST environment variables to enable event capture and session replay.

Can I track server-side API events with PostHog in Next.js 15+?▼

Yes, you can track server-side API events with PostHog in Next.js 15+ by configuring posthog-node. This approach supports immediate flush and shutdown patterns to capture server actions reliably without waiting for client-side instrumentation.

How do I set up feature flags and error tracking in Next.js using PostHog?▼

Set up feature flags and error tracking by initializing PostHog in your instrumentation-client.ts file. This provides consistent analytics hooks for flag evaluations and enables capturing exceptions across both client components and server-side API routes for observability.

What environment variables do I need to configure for PostHog in Next.js?▼

You must configure NEXT_PUBLIC_POSTHOG_KEY and NEXT_PUBLIC_POSTHOG_HOST environment variables to initialize PostHog. These keys enforce secure connections and allow both client-side posthog-js and server-side posthog-node to authenticate tracking requests.

How do I manage user identification and reset events with PostHog in Next.js?▼

Manage user identification by calling PostHog identify patterns during login events across both client and server components. Execute a reset on logout to clear session data, ensuring subsequent user actions and feature flag evaluations remain isolated.

Does PostHog session replay work with Next.js App Router instrumentation?▼

Yes, PostHog session replay works with Next.js App Router by initializing posthog-js within instrumentation-client.ts. This captures client-side interactions and errors natively, providing full visibility into user sessions alongside server-side API tracking.

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
antonyfmunozantonyfmunoz

posthog

Capture PostHog events, evaluate feature flags, and run HogQL queries.

Community
Advanced
Volcar144Volcar144

integration-nextjs-app-router

Integrate PostHog analytics into Next.js App Router applications.

Community
Intermediate
mgd34msumgd34msu
4

posthog

Integrate PostHog analytics into React and Next.js applications.

Community
Intermediate