133

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 ?

3

20 Answers 20

181

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>
      
5
  • 7
    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
    Commented May 19, 2021 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
    Commented Jun 4, 2021 at 18:47
  • 8
    Also, adding a comment to highlight the importance of the rel="noopener noreferrer" properties for any new tab links. reliablesoft.net/noreferrer-noopener
    – Jay
    Commented Dec 30, 2021 at 12:22
  • 6
    I have come back to look at this same answer on like 10 different occasions.
    – Matt
    Commented Apr 5, 2022 at 8:00
  • sometimes you don't know if a link will be internal or external and have to cover both cases, so the answers below which explain how to do this with <Link /> are going to be more flexible and more robust than this answer. Commented Sep 6, 2023 at 9:26
86

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>

5
  • 7
    It doesn't solve it, link opens in the same tab
    – Werthis
    Commented Dec 1, 2022 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
    Commented Dec 12, 2022 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
    Commented Jan 8, 2023 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
    Commented Jan 9, 2023 at 2: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
    Commented Jan 10, 2023 at 13:38
54

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>
4
  • 1
    didn't work unless I added target="_blank" to Link like: ``` <Link href={href} target='_blank' > ``` Commented Jun 11, 2022 at 7:23
  • 2
    Can you provide a source on where "you've heard"?
    – kiru
    Commented Jun 18, 2022 at 15:09
  • 1
    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. Commented Jun 19, 2022 at 15:35
  • 1
22

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>
0
11

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

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

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

10

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.

9

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

}
4
  • 4
    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
    Commented Dec 12, 2022 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 "<div onClick={() => 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
    Commented Dec 22, 2022 at 1:49
  • 2
    So, with the first sentence you're suggesting "Use next router", but then you're not using it. What's the point? Commented May 3 at 9:50
  • No, the import is not necessary. This is a piece of code from one of my apps. I used next router for inner links. You can leave the import out. I am certain I clarified that above. I suggest you read the comments.
    – Jobajuba
    Commented May 6 at 14:54
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.

4

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>
2
  • 1
    What if I want to open one of my own pages in a new tab? Commented Jul 5, 2022 at 16:46
  • In this case you would also use an <a> 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
    Commented Sep 30, 2022 at 20:07
4

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

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

if you are using nextJs 14 then you can do like this

<Link href={"https://www.apple.com/"} target="_blank"> Appple </Link>
3

In Next.js 14.0.1, you can utilize the <Link> component to create links. Within the Link tag, there is an attribute called target. By using target="_blank", you can open the link in a new tab. If you omit the target attribute, the link will open in the same tab.

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

You can use a simple tag instead of from Next.js because you're directly linking to an external URL without need of client-side routing.

0

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

If you are using Next13, you can do this without the need for an anchor tag :

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

To add an external link to the Next.js Link component we should use attribute passHref.

import Link from 'next/link';    

const App = () => (
  <Link href="https://your-external.link/" passHref={true}>
    Your External Link
  </Link>
)

export default App;
0
<Link href=""  target="_blank"  rel="noopener noreferrer">
    content          
</Link>

Directly use the target and rel keys inside the next link tag , it will work fine.

1
  • Thank you for your interest in contributing to the Stack Overflow community. This question already has quite a few answers—including one that has been extensively validated by the community. Are you certain your approach hasn’t been given previously? If so, it would be useful to explain how your approach is different, under what circumstances your approach might be preferred, and/or why you think the previous answers aren’t sufficient. Can you kindly edit your answer to offer an explanation? Commented Jul 31 at 0:44
0

Just use the <Link> React component that extends the HTML <a> element from Next.js Link.


From the documentation:

Good to know: <a> tag attributes such as className or target="_blank" can be added to <Link> as props and will be passed to the underlying <a> element.

Example:


<Link href="/dashboard" target="_blank">Dashboard</Link>
-1

in next 13 i can do it like this

          <Link
            target="_black"
            rel="noopener noreferrer"
            href={"https://www.instagram.com/"}
          >
            <AiOutlineInstagram
              className="h-8 hover:text-gray-500 w-8 bg-green-50 rounded-xl p-2 hover:shadow-xl"
              title=""
            />
          </Link>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.