How to Add Analytics to a Next.js App (Without Cookies or Consent Banners)

You've built a Next.js app. Now you want to know how many people use it — without adding a cookie banner, without slowing down your site, and without sending your visitors' data to Google.

Here's how to do it in under 2 minutes.

Why Not Just Use Google Analytics?

Google Analytics sets cookies, collects IP addresses, and shares data across Google's advertising network. In the EU, this means you need a cookie consent banner — and most visitors reject those, which means your data is incomplete anyway.

There's also the legal risk. Multiple EU data protection authorities have ruled that Google Analytics violates GDPR because it transfers personal data to the US without adequate safeguards.

For a Next.js app, you want something lighter.

The Setup: One Component, Zero Config

App Router (Next.js 13+)

Add the tracking script to your root layout:

// app/layout.js
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://app.fairlytics.dev/js/tracker.v1.js"
          data-site="YOUR_TRACKING_ID"
          data-api="https://app.fairlytics.dev"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Pages Router

Add it to _document.js:

// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
        <script
          src="https://app.fairlytics.dev/js/tracker.v1.js"
          data-site="YOUR_TRACKING_ID"
          data-api="https://app.fairlytics.dev"
          defer
        />
      </body>
    </Html>
  );
}

That's it. Deploy and you're tracking page views.

What About Client-Side Navigation?

Next.js uses client-side routing — when a user clicks a link, the page doesn't fully reload. The Fairlytics tracker handles this automatically. It listens for URL changes via the History API, so every route transition is tracked as a page view without any extra code.

No need for a usePathname() hook, no router.events listener, no manual trackPageview() calls. It just works.

What Gets Tracked

What Does NOT Get Tracked

This means you don't need a cookie consent banner. The script is fully compliant with GDPR, CCPA, and ePrivacy without user consent.

Performance Impact

The tracker script is 510 bytes gzipped. For comparison:

Script Size (gzipped)
Google Analytics (GA4) ~22 KB
Plausible ~1 KB
Fairlytics 510 bytes

It loads with strategy="afterInteractive" so it never blocks your initial render. Your Lighthouse score won't change.

Optional: Track Custom Events

If you're on a Pro plan, you can track button clicks, form submissions, or any custom conversion:

// In any component
function SignupButton() {
  const handleClick = () => {
    window.fairlytics?.track('signup_click');
    // ... rest of your logic
  };

  return <button onClick={handleClick}>Sign Up</button>;
}

Optional: Respect Do Not Track

The tracker automatically honors both the Do Not Track header and the Global Privacy Control signal. If a visitor has either enabled, no data is sent. You don't need to add any code for this.

Deploying on Vercel? You're Done

If you're deploying your Next.js app on Vercel, there's nothing else to configure. The script loads from Fairlytics' servers, so there are no environment variables, no API routes, and no build-time setup needed.

The Bottom Line

Adding analytics to a Next.js app doesn't have to mean adding cookies, consent banners, or privacy policies. With a single <Script> component and zero configuration, you can see how your app is being used while respecting every visitor's privacy.

Create a free account — it takes 30 seconds, no credit card required. The free plan covers up to 10,000 page views per month.

Questions about the integration? Get in touch — we're happy to help.