Next.js Link tag makes it fast to navigate between pages and has many benefits, but it comes with a big accessibility issue.

The issue is when you try to open the Link tag content, you won't be able open it in new tab. It works as a onClick handler by default which is a big accessibility and SEO issue.

Search engines crawl pages by looking at the links in <a> tag. Since there's no actual link when you use <Link> tag, search engines can't see and recognise the link that you've set and hence it can cause Search Engines to ignore that link.

It's also a big accessibility issue, when you define a link you expect it to act like a link and not a function assigned to a div. You should be able to open the links in new tab, or with Cmd + Click.

The fix

A simple Link tag use looks something like this:

<Link href="/blog">Blog</Link>

To fix the accessibility issue, all we need to do is wrap the contents of Link tag in a <a> tag. This will make it an actual link which you can open in a new-tab and which Search Engines can recognise.

Here's how it looks:

<Link href="/blog">
  <a>Blog</a>
</Link>