NextJs 13 and Server Side Components

With NextJS 13 being released the standard way of tracking with the client no longer works. This is due to the setup requiring the useEffect hook which is now exclusively used in client components which don’t have access to next/router anymore.

'use client'
import { load, trackPageview } from 'fathom-client'
import { useRouter } from 'next/router' // this cannot be found
import { useEffect } from 'react'

export default function Fathom() {
  const { events } = 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.
    load('KEY', {
      includedDomains: ['DOMAIN'],
      url: 'CUSTOM_URL',
      spa: 'auto',
    })
    function onRouteChangeComplete(): void {
      trackPageview()
    }
    // Record a pageview when route changes
    events.on('routeChangeComplete', onRouteChangeComplete)
    // Unassign event listener
    return (): void => {
      events.off('routeChangeComplete', onRouteChangeComplete)
    }
  }, [events])

  return null
}

Next is using next/navigation to provide the useRouter hook now which does not expose an event object.

Has anybody has success using server components?

[kochie]

I’m thinking a middleware solution might be the goto. I shall be investigating 👀

[derrickreimer]

Nice, thanks!