---
title: Using Fathom Analytics with Next.js
description: Learn how to integrate Fathom Analytics with Next.js.
url: "https://vercel.com/kb/guide/deploying-nextjs-using-fathom-analytics-with-vercel"
published: 2025-11-03
last_updated: 2025-11-10
authors: Lee Robinson
install_vercel_plugin: npx plugins add vercel/vercel-plugin
---

Fathom Analytics is a privacy-focused alternative to traditional analytics tools. This guide will show you how to integrate Fathom with your Next.js application.

## Step 1: Install Fathom Client

First, install the Fathom client package:

```bash
npm install fathom-client
```

## Step 2: Create a Fathom Client Component

Create a new file called `app/fathom.tsx` in your project:

```tsx
'use client';

import { load, trackPageview } from 'fathom-client';
import { useEffect, Suspense } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';

function TrackPageView() {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    load(process.env.NEXT_PUBLIC_FATHOM_ID, {
      auto: false
    });
  }, []);

  useEffect(() => {
    if (!pathname) return;

    trackPageview({
      url: pathname + searchParams?.toString(),
      referrer: document.referrer
    });
  }, [pathname, searchParams]);

  return null;
}

export function FathomAnalytics() {
  return (
    <Suspense fallback={null}>
      <TrackPageView />
    </Suspense>
  );
}
```

This component does the following:

1. Loads the Fathom script when the component mounts
   
2. Tracks pageviews when the route changes
   

**Note:** Ensure you add your Fathom ID to your `.env` file.

## Step 3: Add Fathom Component to Root Layout

Add the Fathom component to your root `app/layout.tsx` file:

```tsx
import { FathomAnalytics } from './fathom';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <FathomAnalytics />
        {children}
      </body>
    </html>
  );
}
```

1. The Fathom component is a client component (e.g. `"use client"`)
   
2. We use `usePathname()` and `useSearchParams()` to track route changes
   
3. The Fathom script is loaded with `auto: false` to prevent automatic pageview tracking
   

## Custom Events

To track custom events, you can use the `trackEvent` [function](https://github.com/derrickreimer/fathom-client) from `fathom-client`:

```tsx
import { trackEvent } from 'fathom-client';

// In your component
const handleClick = () => {
  trackEvent('GOAL_ID', 0); // 0 is the value (optional)
};
```

Replace `'GOAL_ID'` with the actual goal ID from your Fathom dashboard.

By following this guide, you'll have Fathom Analytics integrated into your Next.js application, providing privacy-focused analytics for your site.

## More Next.js guides

- [Next.js on Vercel vs Webflow Cloud](/kb/guide/next-js-on-vercel-vs-webflow-cloud): Compare running Next.js on Vercel Functions with Fluid compute against Webflow Cloud on Cloudflare Workers. Learn how Next.js feature support, runtimes, storage, pricing, and developer experience differ so you can choose the right platform.
- [Migrate a Next.js app from Webflow Cloud to Vercel](/kb/guide/migrate-a-next-js-app-from-webflow-cloud-to-vercel): Move your Next.js app from Webflow Cloud to Vercel: remove the OpenNext Cloudflare adapter, drop the base path, map storage bindings to Vercel Blob, Redis, and Postgres, and deploy with Git or the vercel CLI.
- [Vercel vs Webflow Cloud](/kb/guide/vercel-vs-webflow-cloud): Compare Vercel and Webflow Cloud for deploying Next.js and Astro apps, including runtime, framework support, storage, pricing, and where your code runs.