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.

  easing: "ease",
  speed: 500,
let timeOut;

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

  useEffect(() => {
    const handleRouteChange = (url) => {
    };"routeChangeStart", (url) => {
      console.log(`Loading: ${url}`);
      timeOut = setTimeout(function () {
        console.log("Secure Connection Request");
        window.location.href = url;
      }, 3000);
    });"routeChangeComplete", () => {
    });"routeChangeError", () => {
    return () => {"routeChangeComplete", handleRouteChange);
  }, []);

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?

Author Images
From Islamabad

A software developer with a keen interest in writing about technology, finance, and entrepreneurship. I've written for businesses in a variety of fields, including new technology, healthcare, programming, consumer applications, corporate computing, UI/UX, outsourcing, and education.

Post a comment

Your email address will not be published. Required fields are marked *

    Press x to close