1

I am trying to open a new browser tab and redirect to the respected URL when the button is clicked, however when an element other than an anchor tag is used inside Next's <Link> element, it just ignores the target="_blank" attribute.

The structure is as below:

<Link passHref href={applicationUrl}>
  <Button className={styles.button}>
    <a target="_blank">Apply</a>
  </Button>
</Link>

I can't easily get rid of the component in the middle, because of styling purposes. But it seems that in this structure, I can't get the applicationUrl to open in a new tab. It still redirects, but in the same browser tab. If I remove the component in the middle, it works though.

<Link passHref href={applicationUrl}>
  <a target="_blank">Apply</a>
</Link>

How do I get it to work without losing the styling, or duplicating CSS that is necessary?

Update: Apparently changing the order of the <Button> and <a> is a solution.

<Link passHref href={applicationUrl}>
   <a target="_blank">
      <Button className={styles.button}>
         Apply
      </Button>
   </a>
</Link>
Egemen Baki
  • 33
  • 7

1 Answers1

0

Set target="_blank" as a prop for the Link and it should work just fine.

<Link passHref href={applicationUrl} target="_blank">
   <Button className={styles.button}>
      <a>Apply</a>
   </Button>
</Link>

That being said, there's no reason to use a Link if you're opening the page in a new tab. You can just get rid of the Link and put the href and target in the a tag.

  • When I try to give target attribute to element, I get the following error: Property 'target' does not exist on type 'IntrinsicAttributes & LinkProps & { children?: ReactNode; }' – Egemen Baki Nov 14 '22 at 20:13