Link to target="_blank" with next js

Question

I am using <Link> component of Next.js Link from 'next/link';

I like to make something as <Link href={link} target="_blank"> with same behaviour as <a href={link} target="_blank"> (redirect to new tab). Unfortunately, <Link> does not have target property.

How can I create <Link> to the new tab without closing the current tab?

P.S. I need it because I have a huge table that loads a lot of time, so if I just using <Link> with no new tab, every time client likes to go back he needs to wait 30 seconds.

Does this answer your question? [How to open a link in a new Tab in NextJS?](https://stackoverflow.com/questions/65632698/how-to-open-a-link-in-a-new-tab-in-nextjs) — Hassan Imam, Jun 03 '21 at 13:08
No, because I will link to an internal link, not an external one as shown in your example. — ChilTest, Jun 03 '21 at 13:20

score 5 · Answer 1 · answered Jun 23 '22 at 22:10

5

As @adrian suggested in his comment The solution is to use passHref and add target="_blank" to the anchor element:

<Link href="/some/internal/path" passHref>
  <a target="_blank">Your link</a>
</Link>

answered Jun 23 '22 at 22:10

a.barbieri

2,398
3
30
58

The `passHref` prop is not needed in this scenario. – juliomalves Jun 26 '22 at 12:17

score 4 · Answer 2 · answered Jun 03 '21 at 13:50

4

<Link> component is use for client navigation (without reloading the app).

If you want to open in a new tab, you can use <a href={url} target="_blank" /> directly without using next/link components, since you are open a new instance of your app / webpage anyway.

answered Jun 03 '21 at 13:50

Someone Special

12,479
7
45
76

1

Yes, but if I use tag, I need to pass absolute url to the href property, like: instead of Some others suggestions? – ChilTest Jun 03 '21 at 14:26
4

@ChilTest Wrap your with a Link component and set the passHref property to true – adrian Feb 16 '22 at 07:12

score 1 · Answer 3 · answered Jun 03 '21 at 13:54

I need it because I have a huge table that loads a lot of time, so if I just using <Link> with no new tab, every time client likes to go back he needs to wait 30 seconds.

It isn't possible to open a link in a new window while simultaneously making that link just do internal routing within the app.

You have to load the app fresh if you want to open it in the new window, and that means using <a href={link} target="_blank"> and having the performance impact of reloading the app.

Link to target="_blank" with next js

3 Answers3