---
title: Using Fathom Analytics with Next.js
description: Learn how to integrate Fathom Analytics with Next.js.
url: /kb/guide/deploying-nextjs-using-fathom-analytics-with-vercel
canonical_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
related: []
install_vercel_plugin: npx plugins add vercel/vercel-plugin
---
<!-- docsgraph:related -->
## Related pages

> **For AI agents:** Follow these links to understand how this page connects to the rest of the Vercel ecosystem. For the full cross-link map (inbound, outbound, prerequisites, and semantic neighbors), see the .graph.md link below.

- [Getting Started](https://vercel.com/docs/analytics/quickstart?from=related) — Vercel Web Analytics provides you detailed insights into your website's visitors. This quickstart guide will help you ge
- [Analytics](https://nextjs.org/docs/app/guides/analytics?from=related) — Measure and track page performance using Next.js Speed Insights
- [Analytics](https://nextjs.org/docs/pages/guides/analytics?from=related) — Measure and track page performance using Next.js
- [Getting Started](https://vercel.com/docs/speed-insights/quickstart?from=related) — Vercel Speed Insights provides you detailed insights into your website's performance. This quickstart guide will help yo
- [Using Web Analytics](https://vercel.com/docs/analytics/using-web-analytics?from=related) — Learn how to use Vercel's Web Analytics to understand how visitors are using your website.
- [Redacting Sensitive Data](https://vercel.com/docs/analytics/redacting-sensitive-data?from=related) — Learn how to redact sensitive data from your Web Analytics events.
- [Third Party Libraries](https://nextjs.org/docs/app/guides/third-party-libraries?from=related) — Optimize the performance of third-party libraries in your application with the `@next/third-parties` package.
- [Using PostHog with the Next.js App Router and Vercel](https://vercel.com/kb/guide/posthog-nextjs-vercel-feature-flags-analytics?from=related) — Learn how to use PostHog with Next.js and Vercel to add analytics, feature flags, and more.
- [Connect Next.js to Amazon Aurora PostgreSQL using Vercel Marketplace](https://vercel.com/kb/guide/connect-next-js-to-amazon-aurora-postgresql-using-vercel-marketplace?from=related) — Learn how to connect your Next.js application to Amazon Aurora PostgreSQL securely using the Vercel Marketplace AWS inte

Full cross-link map for this page: [/kb/guide/deploying-nextjs-using-fathom-analytics-with-vercel.graph.md](/kb/guide/deploying-nextjs-using-fathom-analytics-with-vercel.graph.md)
<!-- /docsgraph:related -->


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.