integration-nextjs-app-router

Name: integration-nextjs-app-router
Availability: InStock
Author: Amplitude

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

Ready to run

npx skills add https://github.com/amplitude/wizard --skill integration-nextjs-app-router-amplitude

💬 Prompt for ChatGPT / Claude Chat▼

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.