How to add analytics to Next.js (no cookies)

Before you start

Create a free Cool Analytics account and add your site. You'll get a site ID — replace YOUR_SITE_ID in the code below with it. The dashboard shows the snippet with your ID already filled in.

Install on Next.js

1Open your root layout: app/layout.tsx on the App Router, or pages/_app.tsx on the Pages Router.
2Import Script from next/script and add the tag inside <body>, below {children}.
3Deploy. Route changes made with <Link> or router.push are tracked automatically.

app/layout.tsx

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script defer src="https://coolanalytics.dev/hb.js" data-site="YOUR_SITE_ID" strategy="afterInteractive" />
      </body>
    </html>
  );
}

Check that it works

Open your live site in a new tab, then open your Cool Analytics dashboard. Your visit appears on the live map within seconds — with the page you're on, where you came from and your browser.

Nothing showing up? Make sure you're looking at the published site (not a preview or editor), that an ad blocker isn't blocking the script, and that you're not testing on localhost.

Track signups, purchases and clicks

Pageviews, sources, countries and outbound link clicks are tracked automatically. For the moments that matter to you, send a custom event. Events named like a signup show up as signups, and events with an amount show up as revenue — on the live map and per traffic source.

custom events

// anywhere in your Next.js site's browser code
window.hb?.track("signup");

// with an amount, it shows up as revenue
window.hb?.track("purchase", { amount: 49 });

Next.js tips

strategy="afterInteractive" loads the script after hydration, so it never blocks rendering or hurts your Core Web Vitals.
To keep preview deployments out of your stats, render the tag only when process.env.NODE_ENV === "production" (or check VERCEL_ENV).
Visits from localhost are ignored so your own development doesn't count. To test locally, add data-dev="1" to the script tag for a moment — then remove it.

Want to keep your own visits out of the stats? Open your site once with #hb-ignore at the end of the URL. That browser is excluded until you visit with #hb-track.

Next.js analytics FAQ

Does it work with the App Router and React Server Components?+

Yes. The Script tag lives in the root layout, which is shared by every route. The tracker itself runs in the browser, so server components need no changes.

Do I need a cookie banner for my Next.js site?+

Not for Cool Analytics — it sets no cookies and stores nothing that identifies a person. Other tools on your site may still need one.

Should I use next/script or a plain <script> tag?+

next/script is the recommended way: Next.js deduplicates it across navigations and controls when it loads. A plain tag in the layout's <head> also works.

How to add analytics to Next.js