Skip to content

How to open a link in a new tab

Posted on:October 29, 2021 at 00:00:00

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>

Here are some articles you might like