How to open a link in a new tab

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.

Prefer video content over a blog? Check it out below.

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>

javascript

Subscribe to my newsletter

Get emails when I post new articles, new courses and videos and much more!

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>

javascript

James Perkins

James is a developer advocate, who helps developers understand the Jamstack, and how it can be used to build a faster web.

0 comments