skills.rest
homostellaris
homostellarisCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/homostellaris/starfocus --skill nextjs-app-router-homostellaris
Or copy as Structured Prompt for Agent▼
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.

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
Volcar144Volcar144

integration-nextjs-app-router

Integrate PostHog analytics into Next.js App Router applications.

Community
Intermediate
PostHogPostHog
58

feature-flags-nextjs

Manage and evaluate PostHog feature flags in Next.js apps.

Official
Advanced
kausthubh-coderkausthubh-coder

integration-nextjs-app-router

Integrate PostHog analytics into Next.js App Router applications.

Community
Intermediate