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:
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:
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:
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.
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 // Example: yourdomain.com // - Do not include https:// // - This must be an exact match of your domain. // - If you're using www. for your domain, make sure you include that here. Fathom.load('YOUR_FATHOM_TRACKING_CODE', { includedDomains: ['yourdomain.com'], });
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;
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.