Next.js Analytics Integration

To add tinyanalytics to a Next.js app, load the tracking script with Next’s next/script component in your root layout so it runs on every page. Client-side navigation between routes is tracked automatically, so you don’t need to wire anything into the router.

Before you start

A tinyanalytics site. If you don’t have one yet, follow the Quickstart.
Your site’s numeric site ID, from Settings → Tracking in your dashboard.

Add the tracking script

App Router
Pages Router

Add a <Script> to your root layout, app/layout.tsx:

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://dash.tinyanalytics.io/script.js"
          data-site-id="YOUR_SITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Add the same <Script> to pages/_app.tsx:

pages/_app.tsx

import Script from "next/script";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://dash.tinyanalytics.io/script.js"
        data-site-id="YOUR_SITE_ID"
        strategy="afterInteractive"
      />
    </>
  );
}

Replace YOUR_SITE_ID with your real site ID, and copy the full snippet from Settings → Tracking if you’ve toggled any options — pass each data-* attribute as a prop on <Script>.

Next.js renders route changes on the client, and tinyanalytics records each one as a new pageview by default (data-track-spa). You don’t need to hook into next/navigation or the router — moving between pages is captured for you. See Track single-page apps if you want to change this.

Verify

Deploy or run your app, open it in a browser, then check Realtime in your dashboard for your visit. See Verify your setup for the full check.

Your install is working when your own visit appears in Realtime in your dashboard.

Install on React

A plain React or Vite app instead.

Configure the tracking script

Every data-* option, passed as a <Script> prop.

Track custom events

Send events from your components.

Verify your setup

Confirm tracking works.

Choose an install method

Frameworks

Other platforms

Next.js Analytics Integration

Before you start

Add the tracking script

Client-side navigation is tracked automatically

Verify

Install on React

Configure the tracking script

Track custom events

Verify your setup

​Before you start

​Add the tracking script

​Client-side navigation is tracked automatically

​Verify

​Related

Install on React

Configure the tracking script

Track custom events

Verify your setup

Before you start

Add the tracking script

Client-side navigation is tracked automatically

Verify

Related