Next.tsx

export const useRoutePath = () => {
  const router = useRouter();
  const [path, setPath] = useState(router?.asPath);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const routeChangeStartFn = (newPath: string) => {
      setLoading(true);
      setPath(newPath);
    };
    const routeChangeErrorFn = (err: Error, newPath: string) => {
      setLoading(false);
      setPath(newPath);
    };
    const routeChangeCompleteFn = (newPath: string) => {
      setLoading(false);
      setPath(newPath);
    };

    router.events.on("routeChangeStart", routeChangeStartFn);
    router.events.on("routeChangeComplete", routeChangeCompleteFn);
    router.events.on("routeChangeError", routeChangeErrorFn);

    return () => {
      router.events.off("routeChangeStart", routeChangeStartFn);
      router.events.off("routeChangeComplete", routeChangeCompleteFn);
      router.events.off("routeChangeError", routeChangeErrorFn);
    };
  }, []);

  return [path, loading];
};