Analytics for Next.js

Product analytics for Next.js

Drop PulsePanda into your Next.js app and capture page views, events, session replay, and heatmaps across every route — App Router or Pages Router — without wiring up a backend or fighting hydration.

Start for free Install guide

Why it matters

What Next.js teams can finally see

Route changes go untracked

Client-side navigation in Next.js does not fire a full page load, so naive analytics miss most views. PulsePanda hooks the router and counts every route change.

You ship features blind

Track custom events for signups, upgrades, and feature usage to see what actually gets used after each deploy.

Bugs are hard to reproduce

Session replay records the exact DOM and console errors, so you can watch the broken render instead of guessing from a stack trace.

Setup

Add PulsePanda to Next.js

Add the snippet once in your root layout. Use the Next.js Script component with afterInteractive so it loads without blocking your first paint.

App Router — app/layout.tsx

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://pulsepanda.dev/sdk.js"
          data-project="YOUR_PROJECT_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Using the Pages Router? Add the same <Script> to pages/_app.tsx instead. Web analytics, autocaptured clicks, session replay, and heatmaps start immediately.

Workflow

From install to insight

Install the snippet

Add the script once to your Next.js project. Web analytics, autocaptured clicks, session replay, and heatmaps start collecting immediately.

Track what matters

Call pulsepanda.track() on key actions and pulsepanda.identify() after login to connect events, sessions, and feedback to each user.

Act on the data

Build funnels, watch the replays behind drop-offs, read heatmaps, and collect in-product feedback — all in one workspace.

What you get

One snippet, the full picture

Analytics layerPage views, custom events, conversion funnels, and retention.

Behavior layerSession replay, click and scroll heatmaps, and error context.

Feedback layerIn-product surveys, feedback widgets, forms, and a feature voting board.

FAQ

Next.js questions

Does PulsePanda track client-side route changes in Next.js?

Yes. The SDK listens for History API navigation, so every App Router or Pages Router transition is counted as a page view automatically — no manual router events needed.

Will the snippet hurt my Core Web Vitals?

No. The script is deferred and loaded with the afterInteractive strategy, so it runs after your content paints and does not block LCP or interaction.

Can I send custom events from server components?

Custom events are sent from the browser with pulsepanda.track(). Call it from client components or event handlers; server components render the page that loads the SDK.

Add analytics to your Next.js app

Install once and connect analytics, session replay, heatmaps, funnels, and feedback in minutes.

Start for free