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 ?

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

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

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

Answer 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:

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

and there are so many libraries out there.