Logged Next Router to follow pushes to router in complex apps - suitable for debugging

useLoggedRouter.ts

import { useRouter as useNextRouter, NextRouter } from "next/router";

type PushSignature = (href: any, as?: any, options?: any, tag?: string) => Promise<boolean>;

export function useLoggedRouter(): Omit<NextRouter, "push"> & { push: PushSignature } {
  const router = useNextRouter();

  // our new push
  const push: PushSignature = async (href, as, options, tag) => {
    console.log(`%c[router.push]${tag ? ` [${tag}]` : ""}`, "color: teal; font-weight: bold;", { href, as, options });
    return router.push(href, as, options);
  };

  // spread everything except `push`, and override it
  const { push: _orig, ...rest } = router;
  return { ...rest, push };
}