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

Create a Next.js app and add Fathom for analytics to get started with your new website or app.

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 simple, 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:

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

Initializing a Next.js project with create-next-app and npm, then moving into the project directory.

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

npm run dev

Starting a local Next.js development server.

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.

Adding a Site with Fathom.

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

npm install fathom-client

Adding the fathom-client dependency to the app.

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.

import { useEffect } from 'react'
import { useRouter } from 'next/router'
import * as Fathom from 'fathom-client'

function App({ Component, pageProps }) {
  const router = useRouter()

  useEffect(() => {
    // Initialize Fathom when the app loads
    Fathom.load('YOUR_FATHOM_TRACKING_CODE', {
      includedDomains: ['YOUR_SITE_URL']
    })

    function onRouteChangeComplete() {
      Fathom.trackPageview()
    }
    // Record a pageview when route changes
    router.events.on('routeChangeComplete', onRouteChangeComplete)

    // Unassign event listener
    return () => {
      router.events.off('routeChangeComplete', onRouteChangeComplete)
    }
  }, [])

  return <Component {...pageProps} />
}

export default App

The contents of a custom _app.js file that loads Fathom on page load.

Step 3: Deploying Your App with Vercel

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

Import the project into Vercel using your Git Integration of choice:

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



Written By
Written by timothytimothy