How to Add Analytics to Your Next.js App

If you've ever dropped a Google Analytics snippet into a plain HTML site, you know the process: paste a script tag in the, done. But Next.js is not a plain HTML site. It introduces three rendering patterns that fundamentally change how analytics scripts load and fire.

Server-Side Rendering

Pages render on the server first. Scripts relying onwindowordocumentthrow errors during SSR.

React Server Components

RSC renders on the server and ships zero JS to the client. Analytics code must live in Client Components or usenext/script.

Client-Side Navigation

After initial load, Next.js routes client-side. Traditional scripts only fire on full page loads — missing every subsequent navigation.

The App Router (introduced in Next.js 13) and the Pages Router handle navigation differently, which affects how you wire up route tracking. We'll cover both patterns below.

Copper Analyticsis a privacy-first analytics platform with automatic SPA route tracking, no cookies, and a script size under 1 KB. It works with both the App Router and Pages Router out of the box — no additional configuration needed for route changes.

The setup takes under five minutes. Create aCopperAnalyticscomponent and include it in your root layout:

Then add it to your root layout:

That's it. The Copper script automatically detects client-side route changes using the History API, so you don't need to add any event listeners or use Next.js router hooks. It works identically in the App Router and Pages Router.

Automatic SPA tracking

No manual route change handling required for either the App Router or Pages Router.

Privacy-first

No cookies, no personal data, GDPR-compliant without consent banners.

Tiny footprint

Under 1 KB — negligible impact on Core Web Vitals and Lighthouse scores.

AI crawler tracking

See which AI bots (GPTBot, ClaudeBot, etc.) crawl your pages — a feature unique toCopper Analytics.

Free tier

Start tracking immediately without a credit card. No trial period, no expiration.

Real-time dashboard

Visitor data appears instantly, not in batched intervals like GA4.

For a complete walkthrough, see our guide on setting up website analytics in 5 minutes.

Google Analytics 4 is the most widely used analytics platform in the world. If your team is already invested in the Google ecosystem — Google Ads, Search Console, Looker Studio — GA4 provides deep integration across all of them.

To add GA4 to a Next.js app, use thenext/scriptcomponent to load the gtag.js library. Create a reusable component:

Add this component to your root layout the same way as the Copper example above. GA4'sgtag.jsscript does detect some client-side navigation automatically via its “enhanced measurement” feature, but it can miss edge cases in Next.js. For reliable tracking, you may want to add manual route change events (covered in the Route Change Tracking section below).

Script size: ~90 KB

The gtag.js bundle impacts LCP and page load speed — 45x larger than Copper's script.

Cookie consent required

GA4 sets cookies and collects personal data, requiring a consent banner in the EU.

Complex event model

GA4's event-based data model has a steep learning curve compared to simpler tools.

Free for most sites

GA4 is free for most traffic levels, making it the default choice for budget-constrained teams.

Plausibleis an open-source, privacy-first analytics tool with a tracking script under 1 KB. Like Copper, it requires no cookies and is GDPR-compliant out of the box. The setup for Next.js is nearly identical to the other script-based options:

Plausible's script automatically tracks SPA route changes via the History API, similar to Copper. No extra configuration is needed for the App Router or Pages Router.

Smallest script available

Under 1 KB — the lightest analytics script among all major tools.

Open source (AGPL)

Self-host via Docker for complete control over your analytics data.

No free tier

Starts at $9/month for 10K pageviews. There is no permanent free plan.

Limited features

No AI crawler tracking, no Web Vitals monitoring, no real-time view.

If you deploy on Vercel, you get access toVercel AnalyticsandVercel Speed Insights— two built-in tools that integrate directly with the platform. Setup is minimal since you're already in the Vercel ecosystem:

Route changes are tracked automatically. The integration is clean and requires zero configuration. However, there are significant limitations:

Vercel-only

Only works on Vercel-hosted deployments. Move to AWS or Cloudflare and you lose your analytics.

Basic metrics only

Pageviews, top pages, referrers, countries, devices. No custom events, no funnels.

Free tier limits

Hobby plan: 2,500 events/month. Pro: 25K events, with overages at $14 per 25K.

Vendor lock-in

Analytics tied to your hosting provider. No data export, limited flexibility.

Most modern analytics tools (Copper, Plausible, GA4 with enhanced measurement) automatically detect SPA route changes via the History API. If your tool handles this automatically, you don't need the code below. But if you need manual tracking — for example, with a custom analytics endpoint or an older GA4 setup — here's how to do it in each router.

In the App Router, use theusePathnameanduseSearchParams hooks fromnext/navigationinside a Client Component:

Place this component in your root layout alongside your analytics script. It will fire on every route change, including query string updates.

In the Pages Router, use therouter.eventsAPI inside _app.tsx:

TherouteChangeCompleteevent fires after every client-side navigation. Note thatrouter.eventsdoes not exist in the App Router — it's a Pages Router-only API.

Performance matters in Next.js apps, especially if you care about Core Web Vitals and SEO. The size of your analytics script directly impacts Largest Contentful Paint (LCP) and Total Blocking Time (TBT). Here's how the four options compare:

Thenext/scriptcomponent provides three loading strategies that control when the script executes:

beforeInteractive

Loads before hydration. Blocks rendering — never use for analytics.

afterInteractive

Loads after hydration, before idle. Default and best strategy for analytics.

lazyOnload

Loads during idle time. Minimizes performance impact but may miss early pageviews.

For most analytics tools,afterInteractiveis the right choice. It ensures the script loads quickly enough to capture the initial pageview without blocking the critical rendering path. If you use GA4 and want to minimize its performance impact,lazyOnloadis worth testing — but measure the data loss before committing to it in production.

Every analytics tool excels in different contexts. Match your project profile to the right option:

For Next.js developers who want analytics thatjust workwithout compromising on performance or privacy,Copper Analyticsis the best option. Here's why:

If you're already deep in the Google ecosystem and need GA4's integration with Ads and Looker Studio, Google Analytics is the practical choice despite the performance cost. If you want open-source purity and EU data hosting, Plausible is excellent. And if you're on Vercel and only need basic pageview counts, Vercel Analytics will cover you with no setup.

But for the majority of Next.js developers who want lightweight, privacy-first, feature-rich analytics with a free tier —Copper Analyticsis the right tool.