How to link to external site from NextJS

Question

I feel like this is quite a basic question, but...how?

Googled various forms of this question and couldn't find a clear answer. I'm using NextJS and just want the user to click a button and be taken to a completely different site.

Answer 1

Have a link styled like a button and put in the href that you want the user to visit. Something like this if you're using tailwind:

<Link href="https://www.google.com/">
  <a className="p-2 lg:px-4 mx-2 text-black text-center border border-solid border-black rounded ">Go to google</a>
</Link>

You can also add target='_blank' to the anchor if you want the URL to open in a new tab.

Answer 2

Just add rel="noopener" inside the anchor tag bro. If doesn't works then try adding rel="noopener noreferrer".

    <Link href="https://www.google.com/" passHref>
       <a target='_blank' rel="noopener">Go to google</a>
    </Link>

Answer 3

You can use the following code snippet. We passHref in Link to pass the href to anchor tag so that the SEO will not hurt. Use target='_blank' in the anchor tag to open the external link in the new tab.

<Link href="https://www.google.com/" passHref>
   <a target='_blank' >Go to google</a>
</Link>

Answer 4

import Link from "next/link";   //import this
 
<Link href="/">    //wrap a tag with Link
      <a>Home</a>
 </Link>

<Link href="https://nextjs.org">   //external page
      <a>Next.js</a>
 </Link>