How to Add Analytics to Your Next.js App Without Cookies
Adding analytics to a Next.js application should be simple. With privacy-first analytics, it is. No cookie consent logic, no tag manager, no GDPR headaches. Just a single script tag and you are tracking.
Why Cookie-Free Analytics Fits Next.js
Next.js developers care about performance. A sub-1KB analytics script with no cookies means zero impact on your Lighthouse score and no consent banner blocking your UI.
Unlike Google Analytics, which requires cookie consent flows, privacy-first analytics works without any client-side state management for consent.
Setup with App Router
With the Next.js App Router, add the tracking script in your root layout:
// app/layout.tsx
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Script
src="https://track.clearanalytics.eu/ca.js"
data-site-id="your-site-id"
strategy="afterInteractive"
/>
</body>
</html>
)
}
That is it. The script loads after the page is interactive, so it never blocks rendering.
Setup with Pages Router
For the Pages Router, add it in _app.tsx or _document.tsx:
// pages/_app.tsx
import Script from 'next/script'
export default function App({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<Script
src="https://track.clearanalytics.eu/ca.js"
data-site-id="your-site-id"
strategy="afterInteractive"
/>
</>
)
}
SPA Navigation Tracking
ClearAnalytics automatically detects client-side navigation in single-page applications. Every route change in Next.js is tracked as a pageview without any additional configuration.
Vercel Deployment Considerations
When deploying on Vercel, your analytics script loads from our EU-based CDN. No data passes through Vercel's infrastructure. This keeps your analytics data fully EU-sovereign even when your Next.js app runs on Vercel's global edge network.
Adding Goal Tracking
To track custom events like button clicks or form submissions, use the global tracking function:
// Track a signup conversion
function handleSignup() {
window.ca?.('event', { name: 'signup' })
}
Performance Impact
We tested the impact on a production Next.js site:
- Lighthouse Performance score: no change
- First Contentful Paint: +0ms
- Total Blocking Time: +0ms
- Script size: 0.8KB gzipped
Compare this to Google Analytics (45KB+) or even Plausible (1.5KB). Every kilobyte matters for Core Web Vitals.
Enjoyed this article?
Try ClearAnalytics for free and get privacy-first analytics for your website.
