44

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 ?

Abdo Rabah
  • 954
  • 1
  • 10
  • 21
  • 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

6 Answers6

68

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>
enoch
  • 1,584
  • 1
  • 12
  • 19
  • 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
  • 1
    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
  • I have come back to look at this same answer on like 10 different occasions. – Matt Apr 05 '22 at 08:00
14

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>
corysimmons
  • 6,464
  • 4
  • 50
  • 58
6

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>
Your code
  • 71
  • 1
  • 1
2

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:

  1. Vanilla HTML anchor tag
  2. React-Bootstrap Link
  3. Chakra-UI Link

and there are so many libraries out there.

Ahmed Shaikh
  • 86
  • 8
1

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>
daliudzius
  • 21
  • 3
0

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.

Samitha Wijesekara
  • 101
  • 9