Next.js

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

Logspot works with both the App Router and the Pages Router. The fastest setup is the lightweight script; for typed, programmatic tracking use the @logspot/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.logspot.io/lg.js"
          data-logspot-pk="YOUR_PUBLIC_KEY"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Find your public key in Project settings.

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

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

npm install @logspot/web

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

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

import { useEffect } from 'react';
import Logspot from '@logspot/web';

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

  return null;
}

// app/layout.tsx
import { LogspotProvider } from './logspot';

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

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

Track a Custom Event

import Logspot from '@logspot/web';

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

Identify a User

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

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

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

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

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

See How Tracking & Identity Works for the consent model.

Server-Side Events

For events that happen on the server (webhooks, background jobs), call the Track API with your secret key (x-logspot-sk) instead of the browser SDK.

Verify It's Working

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

On this page