Installation guides

Next.js

Add Calmstats to a Next.js app with the App Router or the Pages Router.

App Router

Add the script to your root layout with next/script:

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://calmstats.com/script.js"
          data-website-id="YOUR-SITE-ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Pages Router

Add the same <Script> to pages/_app.tsx, next to your <Component {...pageProps} />.

Notes

Client-side navigation is tracked automatically, with no router events to wire up.
To keep a signed-in area out of your stats, add data-exclude="/dashboard/**". See Script options.
To count AI crawlers, which never run JavaScript, see Track AI crawlers.