I am trying to build a simple route for my personal blog but the chrome developer tools raise an error saying that Error: Route did not complete loading: /contact when I click my /contact routes from the index page. It also happens when I click another route on my blog vice versa. It's kinda annoying when in development mode, my chrome developer tools always raise this error every time I changed my code and navigate to my routes. I am pretty sure that my code follows all the instructions on next.js official documentation. Here is my code, I am using styled-components for styling my component.
const Navbar = () => {
const router = useRouter();
return (
<NavbarItems>
<div className="container">
<span className="nav-logo">
<Link href="/">
<a>MKL.</a>
</Link>
</span>
<ul className="link-container">
<li className="nav-link">
<Link href="/">
<a className={router.pathname === '/' ? 'active' : ''}>Home</a>
</Link>
</li>
<li className="nav-link">
<Link href="/about">
<a className={router.pathname === '/about' ? 'active' : ''}>
About
</a>
</Link>
</li>
<li className="nav-link">
<Link href="/contact">
<a className={router.pathname === '/contact' ? 'active' : ''}>
Contact
</a>
</Link>
</li>
</ul>
</div>
</NavbarItems>
);
};
After figuring out I also notice that the official next.js web also had this error when I open chrome developer tools and click one of its routes a couple of times.

How to prevent this error on my project and why the next.js web also has this error? I am using next.js v10.0.6, node v14.15.3, and chrome v88.0.4324.104 on windows 10. This error happen both on my development and production.
