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>