Deploy a Next.js App with Analytics Using Fathom and Vercel

When it comes to creating a successful website or app, you will need to add analytics in order to track and understand visitor behaviour and improve based on the data you receive.

This guide will take you through creating an app with Next.js, adding analytics with Fathom, a lightweight, fast, and privacy-focused alternative to Google Analytics.

Step 1: Creating Your App

Next.js is a framework, created by Vercel, for creating production-ready and lightning-fast React apps with a lot of handy features built-in.

To create your new Next.js application, run the following npm command, with create-next-app, from your terminal and follow the installation steps:

1
npm init next-app my-next-app && cd my-next-app

To run your new app locally, run the following command in your terminal, from your new project directory:

1
npm run dev

For more information on how to build your Next.js app and what you can do with it, see the Next.js website and documentation.

Step 2: Adding Fathom

To add Fathom Analytics to your new Next.js app, firstly create an account with Fathom. You will be asked to add a site when logged in. If you plan on using a Custom Domain, enter that as your site URL. Alternatively, if you want to use a free production URL from Vercel, you can go to the Deploy step to deploy your application and get a URL to add before this step.

Click "Get site code" to then get the code for your app's analytics.

Next, add the fathom-client package to your project using npm:

1
npm install fathom-client

Create an _app.js file within the /pages directory of your app and add the following code as its contents. Use the site code you received previously and replace YOUR_FATHOM_TRACKING_CODE with it, then replace YOUR_SITE_URL with the Site URL that you chose.

1
import { useEffect } from 'react';
2
import { useRouter } from 'next/router';
3
import * as Fathom from 'fathom-client';
4

5
function App({ Component, pageProps }) {
6
  const router = useRouter();
7

8
  useEffect(() => {
9
    // Initialize Fathom when the app loads
10
    // Example: yourdomain.com
11
    //  - Do not include https://
12
    //  - This must be an exact match of your domain.
13
    //  - If you're using www. for your domain, make sure you include that here.
14
    Fathom.load('YOUR_FATHOM_TRACKING_CODE', {
15
      includedDomains: ['yourdomain.com'],
16
    });
17

18
    function onRouteChangeComplete() {
19
      Fathom.trackPageview();
20
    }
21
    // Record a pageview when route changes
22
    router.events.on('routeChangeComplete', onRouteChangeComplete);
23

24
    // Unassign event listener
25
    return () => {
26
      router.events.off('routeChangeComplete', onRouteChangeComplete);
27
    };
28
  }, []);
29

30
  return <Component {...pageProps} />;
31
}
32

33
export default App;

Step 3: Deploying Your App with Vercel

To deploy your Next.js with Fathom Analytics project with Vercel for Git, make sure it has been pushed to a Git repository.

Import the project into Vercel using your Git provider of choice.

After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly "main") will result in a Production Deployment.