How to Open a Link in a New Window in Next.js

In Next.js, if you want to open a link in a new window, you can follow these steps:

Wrap the a tag in a Link component provided by Next.js.
Inside the a tag, add the target="_blank" attribute, just like you would in plain HTML.

Here’s an example:

1
2
3

<Link href={url}>
  <a target="_blank">Click this link</a>
</Link>

By wrapping the a tag in the Link component, you ensure that client-side routing works correctly. The href attribute is kept on the Link component.

Opening links in new windows can be useful for directing users to external websites or separate browsing contexts while keeping your Next.js application intact.

To summarize, use the Link component with the target="_blank" attribute inside the a tag to open a link in a new window in Next.js.

tags: [“Next.js”, “JavaScript”, “web development”]