Link to target="_blank" with next js

user_14872716 0
Viewed 3450

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.

next.js reactjs
3 Answers

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>
user_14981180

<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.

user_28220410

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.

Dorward_190680
Related