How do I go to an external link when I click on a button in next js-CodePudding

<button type="button" className = {styles.googleButton}>
     <img className = {styles.image} src = "assets/pictures/google.jpg"></img>
     <p className = {styles.buttonText}> Go To Google</p>
     <img src = "assets\icons\external-link.svg"></img>
</button>

when i click on this button how do i go to google.com on A DIFFERENT TAB?

CodePudding user response：

Add an 'a' tag and set its target value to '_blank'.

Here is an example. It's working for me in my Nextjs project:

  <a href='https://www.google.com' target='_blank' rel='noreferrer'>
    <button type='button'>
      <img src='assets/pictures/google.jpg'></img>
      <p> Go To Google</p>
      <img></img>
    </button>
  </a>

CodePudding user response：

Put it inside a href with a blank tab like

<a href="https://www.google.com" target="_blank">
<img src = "assets\icons\external-link.svg"></img>
</a>