next.js: Error: Route did not complete loading: /projects

What version of Next.js are you using?

10.0.5

What version of Node.js are you using?

14.15.0

What browser are you using?

Chrome

What operating system are you using?

Windows 10

How are you deploying your application?

Vercel

Describe the Bug

I am trying to build a simple route for my portfolio. The route is ‘/projects’. I’ve added a projects.js file in the pages directory with the logical code and when I use next/link for client side transition, I get an error: Route did not complete loading: “projects”. When I use regular anchor tag for routing, there is no issue.

Expected Behavior

It should change the route to the destined page without any error.

To Reproduce

import styles from '../styles/Home.module.css'
import Link from 'next/link'

export default function Footer() {
    return (
        <>
            <div className={styles.link}>
                <a href="https://github.com/devdaksh" target="__blank">github</a>
                <a href="https://twitter.com/dawksh" target="__blank">twitter</a>
                <a href="https://devdaksh.hashnode.dev" target="__blank">blogs</a>
                <a href="mailto:akshd@outlook.com">email</a>
                <Link href="/projects" >
                    <a>projects</a>
                </Link>
            </div>
        </>
    )
}

This is a screenshot of the error