skills.rest
MaxStrootmann
MaxStrootmannCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

integration-nextjs-app-router

Integrate PostHog analytics into Next.js App Router applications.

Updated Feb 27, 2024
Search Tags:#analytics#nextjs#server-side#posthog#app-router#feature-flags#event-tracking
One-click install
npx skills add https://github.com/MaxStrootmann/lumen-yoga --skill integration-nextjs-app-router-maxstrootmann
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: integration-nextjs-app-router
Source: https://github.com/MaxStrootmann/lumen-yoga/tree/main/.claude/skills/posthog-integration-nextjs-app-router
Command: npx skills add https://github.com/MaxStrootmann/lumen-yoga --skill integration-nextjs-app-router-maxstrootmann

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines adding PostHog analytics to Next.js applications using the App Router, removing uncertainty about where to initialize tracking, how to identify users, and how to correlate client and server events.

Core Features & Use Cases

  • Client initialization: Use instrumentation-client to initialize posthog-js for consistent client-side analytics and feature flag evaluation.
  • User identification & event capture: Add posthog.identify on login and posthog.capture in user event handlers to link behavior to people.
  • Server-side tracking & error capture: Use posthog-node in API routes with explicit shutdown to record server-side events and capture exceptions during authentication and critical flows.
  • Use Case: Instrument a login endpoint to capture server_login on the backend, identify the user on the frontend after authentication, and capture product interactions and errors across client and server.

Quick Start

Initialize PostHog using instrumentation-client, add posthog.identify and posthog.capture on login and UI events, and add server-side captures in your app/api routes while keeping keys in 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?▼

You add PostHog analytics to a Next.js App Router by initializing posthog-js via instrumentation-client, setting NEXT_PUBLIC_POSTHOG_* environment variables, and calling posthog.identify and posthog.capture on the client side.

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

Yes, you can track server-side events in Next.js API routes by initializing the posthog-node client, calling its capture methods for server-side tracking, and ensuring explicit shutdown to flush events properly.

How do I use PostHog feature flags in a Next.js App Router application?▼

You use PostHog feature flags in a Next.js App Router by initializing posthog-js through instrumentation-client, enabling consistent client-side feature flag evaluation alongside standard event capture.

What is the best way to correlate client and server PostHog events during authentication?▼

Correlate client and server PostHog events during authentication by capturing a server_login event via posthog-node in API routes, then calling posthog.identify on the frontend after successful authentication.

Do I need environment variables for PostHog server-side tracking in Next.js?▼

Yes, PostHog server-side tracking in Next.js requires NEXT_PUBLIC_POSTHOG_* environment variables to properly configure both the client-side posthog-js and server-side posthog-node clients.

Why does PostHog require explicit shutdown in Next.js API routes?▼

PostHog requires explicit shutdown in Next.js API routes to ensure the posthog-node client flushes all queued server-side events and error captures before the serverless function terminates, preventing event data loss.

Related Skills

Explore More Software Engineering Skills→
unicorn-mafiaunicorn-mafia
43

integration-nextjs-app-router

Integrate PostHog analytics into Next.js App Router applications.

Official
Intermediate
Vero-VenturesVero-Ventures

posthog

Query PostHog analytics data via REST API for events, flags, sessions, and trends.

Official
Intermediate
LucaDeLeoLucaDeLeo
1

integration-tanstack-start

Integrate PostHog analytics into TanStack Start apps for client and server event tracking.

Community
Advanced
motormetricsmotormetrics
21

integration-nextjs-app-router

Integrate PostHog analytics into Next.js App Router apps for client and server event tracking.

Official
Advanced