How I Solved – Nextjs Link Hang and Freeze Issue

The Issue:

Nextjs Link component stopped working when doing client-side routing. It worked sometimes and sometimes nextJs link freezes and it was very annoying. I tried many online solutions available on all GitHub bug reports but nothing worked. The link still hangs sometimes.

I was using the latest nextJs Version 11.1

The Solution

So, until the Vercel team fix this issue, I came up with this idea. it’s not a complete fix but did the job. Now at least it doesn’t hang.

First, install NProgress package to see the page loading progress.

Then open _app.js file and remove the MyApp function. Then paste the following code.

NProgress.configure({
  easing: "ease",
  speed: 500,
});
let timeOut;

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url) => {
      gtag.pageview(url);
    };
    router.events.on("routeChangeStart", (url) => {
      console.log(`Loading: ${url}`);
      clearTimeout(timeOut);
      timeOut = setTimeout(function () {
        console.log("Secure Connection Request");
        window.location.href = url;
      }, 3000);
      NProgress.start();
    });
    router.events.on("routeChangeComplete", () => {
      NProgress.done();
      clearTimeout(timeOut);
      handleRouteChange;
    });
    router.events.on("routeChangeError", () => {
      NProgress.done();
      clearTimeout(timeOut);
    });
    return () => {
      router.events.off("routeChangeComplete", handleRouteChange);
    };
  }, [router.events]);

What this function does is, When the nextJs router doesn’t load the page within 3 seconds, it means the loading is stuck.

So it will hard load the next page with a browser refresh.

Happy coding 🙂

Read: How to Add a Favicon to Next.js Static Site?