How to open a link in a new tab

October 29, 202100: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

Improving Commit Messages with Conventional Commits

March 10, 202300:00:00

Have you ever looked at a commit message and struggled to decipher what it meant? If so, you're not alone! Commit messages are essential for understanding changes to a codebase, but poorly written messages can lead to confusion and difficulty debugging.

How to use Chakra UI and Next Image

January 22, 202200:00:00

ChakraUI and Next Image can work together allowing you to use power styling and powerful optimization together.

I treat debugging as a murder mystery

May 7, 202100:00:00

I have spent so much of my career debugging code, whether its Production code in a large scale enterprise applications or in my own personal code.