PureMetrix for Next.js

Track page changes in the App Router and Pages Router with @puremetrix/tracker—cookieless pageviews and typed custom events right inside your React app.

Quick start

1. Register a site at app.puremetrix.org/register.
2. npm install @puremetrix/tracker
3. Wrap the root layout with PureMetrixProvider from @puremetrix/tracker/react.
4. Send a pageview on every client-side navigation (the App Router does not reload the page).
5. Optional: add a Vercel rewrite so browsers call /px/js and /px/event on your own domain.

import { PureMetrixProvider } from '@puremetrix/tracker/react';

<PureMetrixProvider domain="example.com" key="YOUR_PUBLIC_KEY">
  {children}
</PureMetrixProvider>

Ready-to-copy pageview hook for the App Router, proxy options, and how to check it works: Next.js integration docs.

Single-page apps: count every page change

With client-side routing, the browser does not load a new page when the URL changes. Call track('pageview') on every route change so your numbers stay accurate. Without that hook, only full page loads are counted.

Docs and related pages

• Next.js integration
• npm package overview
• Vercel proxy (a setup for your own site — PureMetrix itself runs on Hetzner, not Vercel)
• PureMetrix for SaaS

Read Next.js docs

Last updated: September 2026