Next.js

First-class Next.js support with automatic pageview tracking

Which Router Are You Using?

Next.js has two routing systems. Choose the guide that matches your project:

Next.js 13.4+ with the app/ directory. Uses Server Components and the new routing system.

Traditional Next.js with the pages/ directory. Requires Next.js 13 or newer.

Feature	App Router	Pages Router
Provider	`NextFathomProviderApp`	`FathomProvider`
Route tracking	`NextFathomTrackViewApp` (included)	`NextFathomTrackViewPages`
Setup location	`app/layout.tsx`	`pages/_app.tsx`
Server Components	Yes (provider is a Client Component)	N/A

All Next.js-specific exports come from react-fathom/next:

import {
  NextFathomProviderApp,
  NextFathomTrackViewApp,
  NextFathomTrackViewPages,
} from 'react-fathom/next'

The base FathomProvider, hooks, and components come from react-fathom:

import { FathomProvider, useFathom, TrackClick } from 'react-fathom'

Store your site ID in an environment variable for production:

NEXT_PUBLIC_FATHOM_SITE_ID=YOUR_SITE_ID

<NextFathomProviderApp siteId={process.env.NEXT_PUBLIC_FATHOM_SITE_ID}>

Environment variables must be prefixed with NEXT_PUBLIC_ to be available on the client side.

Last updated: October 8, 2026