How to open Link in new tab?

[naseef0]

I need to open that link in new tab. how to do it?

i have tried this.

<Link href={{ pathname: "/product-details", query: { id: product.id }, }} > <a target="_blank" rel="noreferrer"> <img className="img-fluid" src={getImageUrlBySize(imageUrl, 3, mimeType)} alt={productName} onError={(e) => onImageError(e)} /> </a> </Link>

But its not working.

[paambaati]

EDIT: See the response from @Tylerian below.

Adding the passHref prop to your <Link> component should solve this.

<Link href={{ pathname: "/product-details", query: { id: product.id }, }} passHref> <a target="_blank" rel="noreferrer"> <img className="img-fluid" src={getImageUrlBySize(imageUrl, 3, mimeType)} alt={productName} onError={(e) => onImageError(e)} /> </a> </Link>

Further reading — https://nextjs.org/docs/api-reference/next/link#forcing-link-to-expose-href-to-its-child

[Tylerian]

I wouldn't use Link component in this case. Opening in a new tab hinders any benefits Link component could provide, as it forces a full load of the site.

[paambaati]

@Tylerian You're right.

[DWMiller]

Please don't cross out your answer because it's often not advised. The question is what it is and you answered it.

I recently had to do this, conditionally (I also don't think we should, but it's not my call), and your answer is the correct answer.

[srflp]

I would use Link component in this case, as it adds the current locale to the URL.

It's useful when you use i18n from next.js.

[Tylerian]

Simply put your navigation code inside an anchor with _blank as target (i.e: <a herf={`/product-details/${product.id}`} target="_blank">).

Using Link component here provides no performance benefit to the end user since you're requesting a fresh load of your site on a new browser tab.

[lingdocs]

The problem with this for me is that it means I have to deal with <a> tag styling, when I would really like to use just the <Link> component when I want something to look plain and avoid the link un-styling hassle. I've created a feature request for this.

[hypnoboutique]

So to make it clear, you want your image to open in a new browser tab when you right-click it, but to open on the same tab when you left-click it?

To do the former you simply have to wrap your image within an anchor. Example and live code preview.

import Link from 'next/link';
 
function Page() {
  return (
    <div>
      <Link href="/index">
        <a>
          <img alt="Random image" src="https://source.unsplash.com/random/300x300" width="300" height="300" />
        </a>
      </Link>
    </div>
  )
}
 
export default Page

IMHO this question isn't even related with Next.js but simple HTML though.

Arguably this is next/react related. How does the anchor magically get populated with the Link href? 🧐

[anguskeatinge]

@hypnoboutique

The code example is slightly wrong here.

The Link tag needs the prop passHref to pass the href to its child, nothing magic.

[hypnoboutique]

Thanks @anguskeatinge. I saw the prop in the type but noted that passing of passHref (true/false/undefined/no prop) doesn't seem to make any difference. The anchor becomes populated by the Link regardless. 🤷

[anguskeatinge]

My bad!!!

Just read through the implementation, turns out they treat a tags specially. Good spotting @hypnoboutique 🤘

  // If child is an <a> tag and doesn't have a href attribute, or if the 'passHref' property is
  // defined, we specify the current 'href', so that repetition is not needed by the user
  if (props.passHref || (child.type === 'a' && !('href' in child.props))) {
    ...
    childProps.href = blah...
    ...
}

p.s. the canary link.tsx is confusing as hell because it is a mish mash of the new and old Link api, so above code is from v11

[deyvisonborges]

Create a Anchor component.

// Anchor.styles.ts
import styled from 'styled-components'

export const Anchor = styled.a`
  color: inherit;
  height: fit-content;
  text-decoration: none;
  width: fit-content;

  :visited,
  :hover,
  :active {
    color: inherit;
  }

  > * {
    color: inherit;
  }
`

// Anchor.tsx
import Link from 'next/link'
import { ReactNode } from 'react'

type AnchorProps = {
  href: string
  children: ReactNode
  passHref?: boolean
  target?: '_blank' | '_self' | '_parent' | '_top'
}

export function Anchor({ href, passHref, target, children }: AnchorProps) {
  return (
    <Link href={href} passHref={passHref}>
      <S.Anchor href={href} target={target}>
        {children}
      </S.Anchor>
    </Link>
  )
}

Using

  const render = () => (
  <Anchor href="https://example.com/new-page" target="_blank" >
       open in new page
  </Anchor>
)

[anguskeatinge]

If you want:

1. single click to follow link, but not refresh page
2. cmd+click to open in a new tab

You need to follow @Tylerian 's comment: #15486 (reply in thread) and wrap an a tag with a Link tag.

<div>
  <Link href='/blah' passHref>
    <a>
      <div>
        Component to link
      </div>
    </a>
  </Link>
</div>

This seems like a pretty common use case, e.g. all of Vercel's links can be cmd+clicked, and almost every Link in my app wraps an a tag.

Would it be much effort to add a prop to the Link component, e.g. cmdClickable that handled this for us?

[nooobcoder]

Hi @paambaati @naseef0 @Tylerian @leerob from the release of Next v13, usage of anchor tag <a></a> inside <Link/> is disregarded, and flags errors.
Here is the link from nextjs docs officially.

Can anybody still tell me, how we can achieve the behavior of opening Link in new tab with the <Link/> component in NextJS.

Thanks.

[jeremybarthoux]

Hi @nooobcoder,
The Link extend AnchorHTMLAttributes, so you can pass prop like you did it on the a tag.
e.g. <Link href={href} target="_blank" />

[leerob]

If the link should open in a new tab, don't use Link and instead just a normal a tag 👍

[srflp]

@leerob unless you make use of automatically prepended locale identifiers ;) then it is easier and better to use Link with target="_blank".

I would even say that this should be a recommended practice because it's future-proof (and i18n compatible)