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

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 ?

next.js

Solution 1:^[1]

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>

Solution 2:^[2]

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>

Solution 3:^[3]

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>

Solution 4:^[4]

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.

Solution 5:^[5]

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>

Solution 6:^[6]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	enoch
Solution 2	corysimmons
Solution 3	Your code
Solution 4	Ahmed Shaikh
Solution 5	daliudzius
Solution 6	Samitha Wijesekara

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]