PureStats
Sign in

PureStats documentation

Next.js

Install PureStats in Next.js with App Router or Pages Router. Add the tracking script, measure client-side navigation and verify pageviews in your dashboard.

Next.js installations should load pf.min.js once in the root layout.

App Router

Add the script in app/layout.tsx or app/layout.jsx:

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://purestats.io/pf.min.js"
          strategy="afterInteractive"
          data-domain="example.com"
        />
      </body>
    </html>
  );
}

Pages Router

Add the script in pages/_app.tsx or pages/_document.tsx:

import Script from 'next/script';

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://purestats.io/pf.min.js"
        strategy="afterInteractive"
        data-domain="example.com"
      />
    </>
  );
}

Client navigation

PureStats detects client-side navigation through History API changes. If you use custom router behavior, confirm pageviews after navigation in the Network panel.

Environment-specific domains

Do not track preview deployments unless you intentionally add them as aliases. Production should use the production canonical domain:

data-domain={process.env.NEXT_PUBLIC_PURESTATS_DOMAIN}

Set that variable to example.com in production.