← Back to blog
4 min readnextjstutorial

Adding Privacy-First Analytics to a Next.js App

A step-by-step guide to integrating Monoid into Next.js without cookies, consent banners, or compliance headaches.

Next.js applications have a few common analytics approaches, and most of them involve either a cookie banner or a heavyweight third-party script that slows down your Core Web Vitals. Here's how to add real-time, privacy-first analytics without either.

What you'll get

  • Pageview tracking on every route change, including client-side navigation
  • Visitor counts, referrers, countries, browser families, and device types
  • No cookies, no fingerprinting, no GDPR consent required
  • Single async script tag — no npm package to maintain

Step 1: Create a Monoid account

Sign up at monoid.website and create a new site. You'll receive a site_id — a short alphanumeric identifier for your property.

Step 2: Add the tracker to your layout

In Next.js 13+ with the App Router, add the tracker script to your root layout.tsx:

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://api.monoid.website/tracker.min.js"
          data-site-id="YOUR_SITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Using strategy="afterInteractive" loads the script after the page becomes interactive, keeping your Largest Contentful Paint score unaffected.

Step 3: Handle client-side navigation

The tracker's built-in history.pushState hook fires automatically on every navigation event in both the Pages Router and the App Router. You don't need to add anything extra.

If you want to send custom events — for example, when a user completes a checkout or clicks a specific button — call the global helper directly:

window.monoid('event', 'checkout_complete')

Step 4: Verify in the dashboard

Open your Monoid dashboard and navigate to a page on your site. You should see a live visitor appear in the realtime feed within a few seconds. If you've set up a staging environment, make sure it uses a separate site_id so development traffic doesn't pollute your production metrics.

What's not required

You don't need to install a cookie consent manager. You don't need to update your privacy policy to mention analytics cookies (because there are none). And you don't need an npm package — the tracker is a single vanilla JavaScript file served from a global edge network.

Browser family and device type are derived server-side from the ordinary request User-Agent for aggregate reporting. Full User-Agent strings, browser versions, cookies, persistent identifiers, and device fingerprints are never stored.

For most Next.js projects, this takes under two minutes from sign-up to live data.