How to open a link in a new tab
Fri Oct 29 2021
Next Link is one of my favorite features of Next.js, when it launched I was impressed with the team over Vercel when they handled internal versus external links.
The Problem
Next Link wraps an a
when using a link and you pass the href
along so where does the target=“_blank” go? Here is an example of Next Link:
<Link href={url}>
<a>Click this link</a>
</Link>
The Solution
The solution is to keep the actions on the a
tag, and the href
on the Link
so it plays nicely with CSR (Client side routing) for example:
<Link href={url}>
<a target="_blank">Click this link</a>
</Link>