skills.rest
omerakben
omerakbenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

nextjs-app-router

Instrument Next.js App Router apps with PostHog analytics for client and server events.

1|Updated Oct 9, 2025
Search Tags:#analytics#production#integration#Next.js#App Router#server-side#PostHog
One-click install
npx skills add https://github.com/omerakben/omer-akben --skill nextjs-app-router-omerakben
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-app-router
Source: https://github.com/omerakben/omer-akben/tree/main/.claude/skills/posthog-nextjs-app-router
Command: npx skills add https://github.com/omerakben/omer-akben --skill nextjs-app-router-omerakben

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill streamlines integrating PostHog analytics into Next.js App Router apps, enabling consistent event tracking across client and server boundaries and avoiding invasive rewrites.

Core Features & Use Cases

  • Unified analytics: Client-side events captured with posthog-js and server-side events with posthog-node, all under a single PostHog project.
  • App Router compatibility: Designed for Next.js App Router apps, including API routes and server components.
  • Minimal integration effort: Adds analytics with minimal changes to existing code, using environment variables for keys and avoid hardcoding secrets.
  • Typical use cases: Track user login flows, API interactions, errors, and navigation events to drive product decisions.

Quick Start

Use this skill to add analytics to a Next.js App Router project by following the steps below.

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

You can integrate PostHog analytics by using posthog-js for client-side event capture and posthog-node for server-side analytics within Next.js App Router patterns, using environment variables to manage keys.

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

Yes, you can track server-side events with PostHog in Next.js App Router by setting up a server-side PostHog client. This allows you to use proper identify and capture usage within server components and API routes.

Does PostHog work with Next.js server components and API routes?▼

PostHog works with Next.js server components and API routes by utilizing a server-side analytics client. This approach ensures consistent event tracking across both client and server boundaries without invasive code rewrites.

How do I manage PostHog API keys in a Next.js production environment?▼

You should manage PostHog API keys in a Next.js production environment by using environment variables. This method avoids hardcoding secrets and allows minimal changes to your existing codebase during analytics integration.

What is the best way to capture user login flows and API interactions in Next.js?▼

The best way to capture user login flows and API interactions in Next.js is by instrumenting your App Router app with PostHog. This provides unified analytics for both client-side and server-side events to drive product decisions.

Related Skills

Explore More Software Engineering Skills→
EthGlobalBangkokEthGlobalBangkok
1

integration-nextjs-app-router

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

Official
Intermediate
dallasbpetersdallasbpeters

integration-react-react-router-7-data

Instrument React Router v7 Data Mode apps with PostHog for events, users, and errors.

Community
Intermediate
MaxStrootmannMaxStrootmann

integration-nextjs-app-router

Integrate PostHog analytics into Next.js App Router applications.

Community
Intermediate
daffy0208daffy0208
34

product-analytics

Implement product analytics event tracking, funnels, cohorts, and metrics.

Community
Intermediate