Debugging the Next.js route with router events (WIP, ignore for now)

debug-next-js-router.tsx

const router = useRouter()

  useEffect(() => {
    const handleStart = (url: string): void => {
      console.log(`Loading: ${url}`)
    }
    const handleError = (err, url): void => {
      //console.log(err)
      console.log(`Cancelled: ${url}`)
    }

    const handleStop = (url): void => {
      console.log(`Completed: ${url}`)
    }

    router.events.on('routeChangeStart', handleStart)
    router.events.on('routeChangeComplete', handleStop)
    router.events.on('routeChangeError', handleError)

    return () => {
      router.events.off('routeChangeStart', handleStart)
      router.events.off('routeChangeComplete', handleStop)
      router.events.off('routeChangeError', handleError)
    }
  }, [router])