move from fathom to vercel analytics

pages/_app.tsx

@@ -1,10 +1,9 @@
-import { useEffect } from "react";
 import { useRouter } from "next/router";
 import { DefaultSeo, SocialProfileJsonLd } from "next-seo";
-import * as Fathom from "fathom-client";
+import { Analytics } from "@vercel/analytics/react";
+import { SpeedInsights } from "@vercel/speed-insights/next";
 import { ThemeProvider } from "../contexts/ThemeContext";
 import Layout from "../components/Layout";
-import config from "../lib/config";
 import { defaultSeo, socialProfileJsonLd } from "../lib/config/seo";
 import { globalStyles, classNames } from "../lib/styles/stitches.config";
 import type { ReactElement, ReactNode } from "react";
@@ -25,36 +24,6 @@ const App = ({ Component, pageProps }: AppProps) => {
   // NOTE: this assumes trailing slashes are enabled in next.config.js
   const canonical = `${process.env.NEXT_PUBLIC_BASE_URL || ""}${router.pathname === "/" ? "" : router.pathname}/`;
 
-  useEffect(() => {
-    // bail immediately if the site ID is not set
-    if (!process.env.NEXT_PUBLIC_FATHOM_SITE_ID) {
-      return;
-    }
-
-    // don't track pageviews on branch/deploy previews and localhost
-    if (process.env.NEXT_PUBLIC_VERCEL_ENV !== "production") {
-      return;
-    }
-
-    // https://usefathom.com/docs/integrations/next
-    // https://vercel.com/guides/deploying-nextjs-using-fathom-analytics-with-vercel
-    Fathom.load(process.env.NEXT_PUBLIC_FATHOM_SITE_ID, {
-      includedDomains: [config.siteDomain],
-    });
-
-    const onRouteChangeComplete = (url: string) => {
-      Fathom.trackPageview({ url });
-    };
-
-    // needs to be triggered manually on link clicks (the page doesn't actually change)
-    router.events.on("routeChangeComplete", onRouteChangeComplete);
-
-    return () => {
-      // unassign event listener
-      router.events.off("routeChangeComplete", onRouteChangeComplete);
-    };
-  }, [router.events]);
-
   // inject body styles defined in ../lib/styles/stitches.config.ts
   globalStyles();
 
@@ -78,6 +47,9 @@ const App = ({ Component, pageProps }: AppProps) => {
       <SocialProfileJsonLd {...socialProfileJsonLd} />
 
       <ThemeProvider classNames={classNames}>{getLayout(<Component {...pageProps} />)}</ThemeProvider>
+
+      <Analytics />
+      <SpeedInsights />
     </>
   );
 };

pages/privacy.tsx

@@ -63,16 +63,22 @@ const Privacy = () => {
         </p>
 
         <p>
-          <Link href="https://usefathom.com/ref/ZEYG0O">
-            <strong>Fathom Analytics</strong>
+          <Link href="https://vercel.com/products/observability">
+            <strong>Vercel Analytics</strong>
+          </Link>{" "}
+          is also used to gain insights into referrers, search terms, etc.{" "}
+          <Link href="https://vercel.com/docs/analytics/privacy-policy#data-point-information">
+            without collecting anything identifiable
+          </Link>{" "}
+          about you. Likewise,{" "}
+          <Link href="">
+            <strong>Vercel Speed Insights</strong>
+          </Link>{" "}
+          is used to gather core web vitals{" "}
+          <Link href="https://vercel.com/docs/speed-insights/privacy-policy#vercel-speed-insights-privacy-&-compliance">
+            anonymously
           </Link>
-          , a <em>very</em> <Link href="https://usefathom.com/privacy-focused-web-analytics">privacy-focused</Link>{" "}
-          service, is also used to gain insights into referrers, search terms, etc.{" "}
-          <strong>without collecting anything identifiable about you</strong>. (My{" "}
-          <Link href="/stats/" openInNewTab>
-            dashboard is completely public
-          </Link>
-          , too!)
+          .
         </p>
 
         <H2 id="third-party">Third-Party Content</H2>