Install Analytise on Next.js

Drop the snippet into your root layout and every page ships with tracking.

App Router

  1. Open app/layout.tsx.
  2. Paste the snippet inside the <head>.
  3. Deploy — full page loads are tracked immediately.
app/layout.tsx
return (
  <html lang="en">
    <head>
      <script
        defer
        data-domain="yourwebsite.com"
        data-site-id="YOUR_SITE_ID"
        src="https://www.analytise.com/js/tracker.js"
      />
    </head>
    <body>{children}</body>
  </html>
);

Client-side transitions between routes don't fire additional pageviews in the current tracker version — every full page load is tracked.

Pages Router

  1. Open pages/_document.tsx.
  2. Add the snippet inside the <Head> tag and deploy.
pages/_document.tsx
import { Head, Html, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html>
      <Head>
        <script
          defer
          data-domain="yourwebsite.com"
          data-site-id="YOUR_SITE_ID"
          src="https://www.analytise.com/js/tracker.js"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Verify it works

  1. Open your website in a new tab.
  2. The dashboard shows your visit under online within a few seconds (live visitors update every ~15s).
  3. Nothing showing? See Troubleshooting.

Next guide

React Router