How to open a link in a new Tab in NextJS?

Question

How can i open a link in a new Tab in NextJS ? i tried this :

      <Link href="https://twitter.com/" passHref>
        <a target="_blank">
          <div className={`${dark ? styles.iconTwitterWhite : styles.iconTwitter} mr-3`} />
        </a>
      </Link>

It opens the link in a new Tab but i have an ESLint message saying :

ESLint: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles.

Is there another way to do it ?

That's the correct way to open in a new tab, but make sure to add `rel="noopener noreferrer"` to [prevent the newly opened tab from being able to modify the original tab maliciously](https://stackoverflow.com/questions/17711146/how-to-open-link-in-new-tab-on-html). Regarding the linting issue, it's a known limitation of Next.js `` component. See possible solutions here: https://github.com/vercel/next.js/issues/5533 — juliomalves, Jan 08 '21 at 18:02

score 145 · Accepted Answer · answered Jan 08 '21 at 19:00

145

As this is an external link, you don't need to use Link

<a target="_blank" href="https://twitter.com/" rel="noopener noreferrer">
    <div className={`${dark ? styles.iconTwitterWhite : styles.iconTwitter} mr-3`} />
 </a>

answered Jan 08 '21 at 19:00

enoch

2,587
2
15
22

5

I'm struggling to get this done for the same website. What if I want another URL opened in a new tab? And before you ask me, yes, I have a valid use case. – ankush981 May 19 '21 at 11:17
@ankush981 That's what the `target="_blank"` attribute is doing here - a new tab will be opened (or a new window, if the user's browser preferences dictate that instead). – bsplosion Jun 04 '21 at 18:47
6

Also, adding a comment to highlight the importance of the `rel="noopener noreferrer"` properties for any new tab links. https://www.reliablesoft.net/noreferrer-noopener/ – Jay Dec 30 '21 at 12:22
5

I have come back to look at this same answer on like 10 different occasions. – Matt Apr 05 '22 at 08:00

score 48 · Answer 2 · answered Feb 08 '22 at 06:54

48

I've heard there are cases where you want to stick with Link (i18n stuff that Link helps with) so you can use passHref (which just passes the href to the immediate child) like so:

<Link href="/" passHref>
  <a target="_blank" rel="noopener noreferrer">
    Foo
  </a>
</Link>

answered Feb 08 '22 at 06:54

corysimmons

7,296
4
57
65

1

didn't work unless I added target="_blank" to Link like: ``` ``` – Abdul Mahamaliyev Jun 11 '22 at 07:23
Can you provide a source on where "you've heard"? – kiru Jun 18 '22 at 15:09
Sorry @kiru I can't remember what it was, but I distinctly remember I used to be on the _"a normal anchor tag is fine"_ team until I ran into something that made me change my mind. – corysimmons Jun 19 '22 at 15:35
@kiru https://nextjs.org/docs/pages/api-reference/components/link#passhref – Mykola Mykolayovich Dolynskyi Jun 22 '23 at 18:43

score 41 · Answer 3 · answered Nov 10 '22 at 00:32

41

Nov. 2022 Answer:

With the release of Next 13, the <Link/> component now renders a <a/> tag internally, so you no longer have to add a child <a/> tag.

This means that in order to open a link in a new tab, you should be able to do the following:

<Link href="https://google.com" rel="noopener noreferrer" target="_blank"> Google </Link>

answered Nov 10 '22 at 00:32

kag359six

1,693
2
16
21

Oh damn, I didn't realize this was a thing. Thanks! – Fyxren Nov 11 '22 at 18:59
1

It doesn't solve it, link opens in the same tab – Werthis Dec 01 '22 at 12:34
@kag359six, if we need to open a page within our next-reactjs app on a new tab, is it possible to do this using router.push? – jsN00b Dec 12 '22 at 15:39
1

@jsN00b I don't believe so, but I'm not sure why you would need to. `router.push` is only useful in the context of the currently open tab. – kag359six Jan 08 '23 at 14:38
"why you would need to." in spite of informing the management that React is supposed to be SPA (single page app), they want to allow user to open a new window (pointing to a "page" within the app). My tech-lead & I informed them that it will cause problem with state-mgmt - but it fell on deaf-ears. – jsN00b Jan 09 '23 at 02:49
1

@jsN00b Understood. You could work around that by passing query parameters in the URL to restore state in that newly opened window. But either way you wouldn't use `router.push` – kag359six Jan 10 '23 at 13:38

score 20 · Answer 4 · answered Oct 09 '21 at 15:11

20

The path in my project: public/NameFile/NamePdf.pdf

Note: 1) Don't forget the dependence for "Link" => import Link from 'next/link' 2) As you can see, I did not put "public" in the link. >> Because you simply don't need to put it because NextJs is smart .

      <Link href="./NameFile/NamePdf.pdf" download>
          <a target="_blank">
              {your code ......}
          </a>
      </Link>

answered Oct 09 '21 at 15:11

Your code

211
2
2

1

Just what i was looking for – Junior Usca Dec 14 '21 at 21:19

score 8 · Answer 5 · answered Apr 18 '22 at 05:16

I tried the below code snippet and it's working without nor errors. Otherwise, my localhost works with no errors but when I"m deploy to the Vercel it's getting errors in the build log. So I tried this code snippet and it's working localhost as well as the vercel.

<Link href="https://twitter.com/">
  <a target="_blank" rel="noopener noreferrer" className='link-item'>
    <div className={`${dark ? styles.iconTwitterWhite : styles.iconTwitter} mr-3`} />
  </a>
</Link>

make sure to add target="_blank" and rel="noopener noreferrer" attribute into a tag.

Ashikur Islam · Answer 6 · 2022-11-16T02:37:02.470

7

On the next.js 13 version, you can use this.

<Link href="https://facebook.com" target="_blank"> Facebook </Link>

edited Nov 16 '22 at 02:37

answered Nov 16 '22 at 02:36

Ashikur Islam

71
1
2

This works for me thanks – Ineza Aug 17 '23 at 11:05

score 6 · Answer 7 · answered Mar 02 '23 at 22:07

Since Next13, the <Link> component should NOT have <a> child. So you cannot put the target there, instead, set it on the <Link> like:

    <Link
      href="/some-route"
      className="some classes"
      target="_blank"
    >
      {children}
    </Link>

However, if you insist on using <a> inside of the Link, you need to pass the legacyBehavior prop:

<Link href="/about" legacyBehavior>
  <a>About Us</a>
</Link>

Check on the next docs

score 3 · Answer 8 · answered Sep 14 '21 at 18:12

Remember that the NextJs link use to move other page of current web without reload right?

So in this case you want to go external link which not exist in you web so you don't need to use Link provided by NextJs. You can use any other link.

For Example:

Vanilla HTML anchor tag
React-Bootstrap Link
Chakra-UI Link

and there are so many libraries out there.

score 3 · Answer 9 · answered Sep 14 '21 at 22:15

3

Use a vanilla tag. Next Link is for efficiently navigating between your own pages, not for navigating to external pages like twitter, LinkedIn, etc.

Example:

<a href='https://www.linkedin.com/in/youraccount/'> My LinkedIn </a>

answered Sep 14 '21 at 22:15

daliudzius

91
3

1

What if I want to open one of my own pages in a new tab? – Agustín Clemente Jul 05 '22 at 16:46
In this case you would also use an tag, not Next Link. This is because opening another tab does a full load of the page therefore removing any efficiency benefits that Next Link was built for. – daliudzius Sep 30 '22 at 20:07

Jobajuba · Answer 10 · 2022-10-10T00:42:44.837

2

Use next router

This method is used with a client-side transition, to move the content of the page in another direction. This kind of behaviour is useful for navigating your page to another tab.

import { useRouter } from "next/router"

export default function App() {     

   const openInNewTab = (url) => {
       const newWindow = window.open(url, '_blank', 'noopener,noreferrer')
       if (newWindow) newWindow.opener = null
   }
 
    
   return (
      <div onClick={() => openInNewTab("/path")}>                                           
         Button
      </div>
   )

}

edited Oct 10 '22 at 00:42

answered Oct 02 '22 at 16:51

Jobajuba

836
7
16

1

Would you please let me know what happens if you remove the `import` from the above snippet? Seems like the `useRouter` is imported, but not used in this context. – jsN00b Dec 12 '22 at 15:38
1

You only need the "useRouter" using the "router.push" function to open a page. This will open the page in the current tab. For example "
router.push("/aboutus")}>". We create a new custom method "openInNewTab" which replaces "router.push" for links you want to open in new tabs. You don't have to import otherwise.
– Jobajuba Dec 22 '22 at 01:49

score 2 · Answer 11 · answered May 22 '23 at 15:46

2

If you use Next13, you can use target props with NextJS Link.

<Link
  href="/page-link"
  target="_blank"
>
  {children}
</Link>

answered May 22 '23 at 15:46

Devdreamsolution

39
5

score 0 · Answer 12 · answered Aug 11 '23 at 10:33

you don't directly control the opening of links in new tabs like you would with traditional HTML anchor tags (). Instead, you typically use the built-in Link component to navigate between pages and let the browser handle how the link is opened based on user preferences.

<Link href="/other-page" passHref>
 <a  target="_blank" rel="noopener noreferrer">Go to Other Page</a>
</Link>

How to open a link in a new Tab in NextJS?

12 Answers12

Linked

Related