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.
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?
Post a comment