skills.rest
amplitude
amplitudeOFFICIAL
Explore all skills by this author →
WebsiteGitHub

integration-nextjs-app-router

Initialize Amplitude client and server tracking in Next.js App Router apps.

28|Updated Dec 5, 2025
Search Tags:#analytics#nextjs#server-side#app-router#amplitude#identify
One-click install
npx skills add https://github.com/amplitude/wizard --skill integration-nextjs-app-router-amplitude
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: integration-nextjs-app-router
Source: https://github.com/amplitude/wizard/tree/main/skills/integration/integration-nextjs-app-router
Command: npx skills add https://github.com/amplitude/wizard --skill integration-nextjs-app-router-amplitude

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This integration solves the challenge of instrumenting Amplitude in Next.js App Router apps by wiring client-side initialization with Unified and server-side events via analytics-node, enabling end-to-end analytics.

Core Features & Use Cases

  • Unified client/server tracking: Initialize Amplitude on the client and log server events from API routes.
  • Framework-specific guidance: Follows App Router patterns and server routes in src/app/api.
  • Use Case: Add event tracking to common flows like login, navigation, and data updates across server and client.

Quick Start

Initialize Amplitude in your Next.js App Router project and verify client and server events flow correctly.

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 implement Amplitude analytics in a Next.js App Router project?▼

To implement Amplitude analytics in a Next.js App Router project, initialize the client using @amplitude/unified and log server events from API routes via @amplitude/analytics-node, handling login, navigation, and server-side data updates.

What is the best way to track server-side events in Next.js App Router API routes?▼

Tracking server-side events in Next.js App Router API routes is handled by using the @amplitude/analytics-node package within your src/app/api routes to securely log server events while maintaining proper user scoping.

Can I set user identity and properties during login with Amplitude in Next.js?▼

Yes, you can set user identity and properties during login with Amplitude in Next.js by exposing setUserId and identify calls, ensuring both client and server events capture the correct user scoping.

Does this Amplitude integration support unified client and server tracking?▼

This Amplitude integration supports unified client and server tracking by wiring client-side initialization with @amplitude/unified alongside server-side events via @amplitude/analytics-node for end-to-end Next.js analytics.

Why do I need separate Amplitude packages for client and server in Next.js?▼

You need separate Amplitude packages for client and server in Next.js because client initialization uses @amplitude/unified for browser interactions, while server events require @amplitude/analytics-node to handle API route tracking securely.

Related Skills

Explore More Software Engineering Skills→
Aqsagull99Aqsagull99

nextjs-skill

Build Next.js 16+ apps with App Router, server components, and API routes.

Community
Intermediate
amplitudeamplitude
28

integration-react-react-router-7-data

Integrate Amplitude Unified SDK into React Router v7 Data applications.

Official
Advanced
amplitudeamplitude
28

integration-expo

Automates Amplitude integration for Expo applications using React Native SDK and AsyncStorage.

Official
Advanced
amplitudeamplitude
28

integration-nextjs-pages-router

Integrates Amplitude analytics into the Next.js Pages Router environment.

Official
Advanced