Next.js

Add Leapio analytics to a Next.js app — automatic pageviews, custom events, and identified users.

Leapio works with both the App Router and the Pages Router. The fastest setup is the lightweight script; for typed, programmatic tracking use the @leapio/web SDK.

Option A — Script Tag (Fastest)

Add the script once, in your root layout. It captures pageviews automatically (including client-side route changes).

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://cdn.leapio.com/lg.js"
          data-leapio-pk="YOUR_PUBLIC_KEY"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Find your public key in Project settings.

Option B — SDK (`@leapio/web`)

Install the SDK for typed track, identify, setConsent, and revenue calls:

npm install @leapio/web

Initialize it once in a Client Component mounted in your root layout:

// app/leapio.tsx
'use client';

import { useEffect } from 'react';
import leapio from '@leapio/web';

export function LeapioProvider() {
  useEffect(() => {
    leapio.init({
      publicKey: 'YOUR_PUBLIC_KEY',
      enableAutoPageviews: true, // tracks App Router route changes for you
    });
  }, []);

  return null;
}

// app/layout.tsx
import { LeapioProvider } from './leapio';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <LeapioProvider />
        {children}
      </body>
    </html>
  );
}

Using the Pages Router? Call leapio.init(...) once in pages/_app.tsx instead.

Track a Custom Event

import leapio from '@leapio/web';

leapio.track({
  event: 'UserSubscribed',
  metadata: { plan: 'pro' },
});

Identify a User

When a user signs in, link their events to a stable id:

leapio.identify('john@doe.com', { plan: 'pro' });

See How Tracking and Identity Works for the anonymous → identified model.

If you gate analytics behind consent, tell Leapio the current state:

leapio.setConsent({ analytics: true, marketing: false });

See How Tracking and Identity Works for the consent model.

Server-Side Events

For events that happen on the server (webhooks, background jobs), use the Node SDK or call the Track API with an API token (Authorization: Bearer sk_...) instead of the browser SDK.

Verify It's Working

Run your app, click around, then open the Leapio dashboard — pageviews and events appear within seconds.

On this page