How to Add Privacy-First Analytics to Your Next.js App in 5 Minutes

Adding analytics to a Next.js app shouldn’t require cookie banners, data processing agreements, or a GDPR lawyer. Here’s how to add Measure.events — cookieless, privacy-first, and AI-queryable — in under 5 minutes.

Step 1: Create Your Account

Sign up at lets.measure.events. After confirming your email, add your site to get a site key (looks like abc123xyz).

Step 2: Add the Tracking Script

The fastest path is adding the script to your _app.tsx (Pages Router) or layout.tsx (App Router).

App Router (Next.js 13+)

In your app/layout.tsx:

import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <Script
          src="https://lets.measure.events/api/script/YOUR_SITE_KEY"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

Replace YOUR_SITE_KEY with the key from your Measure.events dashboard.

Pages Router (Next.js 12 and below)

In your pages/_app.tsx:

import Script from 'next/script'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Script
        src="https://lets.measure.events/api/script/YOUR_SITE_KEY"
        strategy="afterInteractive"
      />
      <Component {...pageProps} />
    </>
  )
}

Step 3: Verify Tracking

Deploy your change and visit your site. In the Measure.events dashboard, you should see a pageview appear within seconds. If you’re running locally, set localhost as an allowed domain or test on your deployed preview URL.

Step 4 (Optional): Track Custom Events

For button clicks, form submissions, or any custom action:

// In any component
const handleSignup = () => {
  // Your signup logic...

  // Track the event
  if (typeof window !== 'undefined' && (window as any).measure) {
    (window as any).measure('event', { name: 'signup_clicked', page: '/pricing' })
  }
}

Step 5 (Optional): Query From Your AI Tools

This is where Measure.events earns its keep. Once you’ve collected data, you can query it directly from Claude, Cursor, or any MCP-compatible tool.

Add the MCP server to your Claude Desktop config (~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "measure-events": {
      "url": "https://lets.measure.events/mcp",
      "headers": {
        "Authorization": "Bearer your_api_key_here"
      }
    }
  }
}

Then ask Claude: “What pages are driving the most traffic to my Next.js app this week?”

Why Not Just Use Vercel Analytics?

Vercel Analytics is convenient but has limitations: it only works on Vercel deployments, has no MCP server, and the free tier caps at 2,500 events/month. Measure.events works on any hosting provider and is built to be queried programmatically.

Why Not Google Analytics 4?

GA4 requires cookie consent banners in most jurisdictions, has a complex event model, and sends data to Google’s servers. If your users are in the EU — or if you just want a clean conscience — cookieless analytics is the better default.

Performance Impact

Measure.events’ tracking script is under 5KB, loads asynchronously, and doesn’t block rendering. Your Core Web Vitals won’t notice it.

What You Get

Pageviews, sessions, and unique visitors
Top pages and referrer sources
Real-time and historical data
MCP server for AI-native querying
No cookie banners required
GDPR-compliant by default

Ready to add it? Start your free 14-day trial →