CODEWITHSUNDEEP
javascripthtmljsxnext.jsuicomponents
Mario Boss
Mario Boss

Reputation: 1975

External link is not working in Next.js when you want to use Link component

I was very surprised that a simple Link component is not working in Next.js when you want to use an external URL and HTML Button tag inside it.

Below you can see how I tried to solve the problem:

Approach number 1:

<Link href="https://stackoverflow.com/">
  <button>StackOverflow</button>
</Link>

Approach number 2 (link without protocol):

<Link href="//stackoverflow.com/">
  <button>StackOverflow</button>
</Link>

Approach number 3 (link without protocol and with Link attribute prefetch set to false or even true):

<Link href="//stackoverflow.com/" prefetch={false}>
  <button>StackOverflow</button>
</Link>

IMPORTANT NOTE

Of course, mentioned case it's working when the URL is internal, like that:

<Link href="/stackoverflow">
  <button>StackOverflow</button>
</Link>

or when I will change HTML button tag into HTML A tag, like that:

<Link href="//stackoverflow.com/">
  <a>StackOverflow</a>
</Link>

In my case, I want to use the HTML button tag or any other UI component inside the Next.js Link component.

Upvotes: 30

Views: 114056

Answers (8)

Ray_Poly
Ray_Poly

Reputation: 173

There is still an issue at hand even using an anchor tag in Next.js which is that Next.js treats every link as internal.

So if you use this code:

<a href={'www.google.com'}>www.google.com</a>

Next.js will still go to: yourhost/www.google.com

The solution is to add: 'http://' or 'https://' at the beginning of the url, this way Next.js will simply redirect to that url.

But if we have the case that a user is writing the url then we should make sure they know they need to add the https:// at the start of it or add it ourselves.

Upvotes: 0

Sachin Saini
Sachin Saini

Reputation: 401

If you are getting the website URL from the API then you need to call the URL as below. In my case, I am getting the website URL like

{website : "nicobar.com"}

 <Link href={`https://${data?.website}`} target="_blank" passHref={true}>
       Visit Website
    </Link>

Upvotes: 1

Cronwel
Cronwel

Reputation: 113

Simply stated, use the <a> tag instead of the next <Link>. The next <Link> is for internal navigation.

Example 1.

   <a
     href='https://www.facebook.com/queueunderstop/'
     target={"_blank"}
     rel={"noreferrer"}>
       <Image
         className='gb'
         src='/images/icons/fb.png'
         alt='facebook'
         width={25}
         height={25}
       />
   </a>

This resolves the issue of the link opening a new link while simultaneously closing the main site. The main things to note are the attributes:

  1. target={"_blank"}
  2. rel={"noreferrer"}

I tried various combinations as well and landed on this after reading the documents carefully even though the documents do not say it implicitly. The documents cover more of does and not all the hypotheticals.

Upvotes: 8

Mario Boss
Mario Boss

Reputation: 1975

1. Solution for UI components inside Next.js Link component.

I have study Next.js documentation in more details and I found a very useful attribute to make an external link for any internal UI components (Semantic UI, Material UI, Reactstrap, etc.) inside Link component.

Let's take as an example a simple Semantic UI button component. To add an external link to the Next.js Link component we should use attribute passHref. This attribute is set to false by default. This attribute forces Link to send the href property to its child.

import { Button } from 'semantic-ui-react';
import Link from 'next/link';    

const Example = () => (
  <Link href="https://stackoverflow.com/" passHref={true}>
    <Button>StackOverflow</Button>
  </Link>
)

export default Example;

2. Solution for HTML elements (different that tag A)

Inside Next.js documentation you can find below sentences:

External URLs, and any links that don't require a route navigation using /pages, don't need to be handled with Link; use the anchor tag for such cases instead.

And I have to write that it is obvious, so in that case, if you need to use any other tag, for example, HTML button, you should use onClick event on it without Link component. The above code will look like this:

const clickHandle = () => {
  document.location.href = 'https://stackoverflow.com/';
}

const Example = () => (
  <button onClick={clickHandle}>StackOverflow</button>
)

export default Example;

UPDATE: Of course, I agree with devs who are writing that for external links we should not use the Link component. The best solution here is to use just pure HTML a tags or JS redirect solution on click event as it has been shown in point 2 (or any similar way). Worth to mention, that you can build your own component and based on the passed href attribute you can switch between Link component and HTML a tag, like that:

  // custom simple smart Link component
  import Link from 'next/link'; 
  
  const SmartLink = (link, url) => {
    const regEx = /^http/;

    return regEx.test(url) ? <Link href={url}>{link}</Link> : <a href={url}>{link}</a>;
  }
  
  export default SmartLink;

  // ways to call the component
  import SmartLink from 'path/to/SmartLink'; // set correct path

  // somewhere inside the render method
  // the below will use HTML A tag
  <SmartLink href="https://stackoverflow.com" link="external StackOverflow website" />
  // the below will use Next.js Link component
  <SmartLink href="/stackoverflow" link="internal StackOverflow page" />

Upvotes: 49

Brandon LeBoeuf
Brandon LeBoeuf

Reputation: 29

There is no need to use the next/link for external links, as it's only for client-side transitions between routes. Link is not intended for linking outside your app.

Upvotes: 2

chanrose
chanrose

Reputation: 19

I had the same issue, somehow I tried the above answers, it wasn't really helpful. What I found is that if you add https or HTTP:// in, it will surely automatically allow you to open external web. Here for a sample:

<a href={`https://${Your link}`}> Open external Link </a>

Upvotes: 0

maosmurf
maosmurf

Reputation: 1946

In my opinion, the accepted answer is wrong. passHref is used when the <a> tag is not a child of <Link>. For external URLs, simply use <a> without <Link>, see below.

  const link = props.link.charAt(0) === '/' ? <Link as={stripUrlPlaceholder(props.link)} href="/">
    <a>{image}</a>
  </Link> : <a href={props.link} rel="noreferrer" target="_blank">{image}</a>;

  return <div className="banner">
    {link}
  </div>;

Upvotes: 16

velvetkevorkian
velvetkevorkian

Reputation: 780

The Link component is only for linking between pages within your Next app. Passing an external URL is not supported behaviour, and should give you an error that links to this page, which includes this section:

Why This Error Occurred

Next.js provides a router which can be utilized via a component imported via next/link, a wrapper withRouter(Component), and now a hook useRouter(). When using any of these, it is expected they are only used for internal navigation, i.e. navigating between pages in the same Next.js application.

Either you passed a non-internal href to a next/link component or you called Router#push or Router#replace with one.

Invalid hrefs include external sites (https://google.com) and mailto: links. In the past, usage of these invalid hrefs could have gone unnoticed but since they can cause unexpected behavior. We now show a warning in development for them.

If you render an <a> inside, the href gets passed on to that and works as expected using native browser behaviour, but other elements can't use that so you would have to handle that case yourself.

I'd suggest looking at what you're trying to achieve though -- what's wrong with using an <a> tag? It seems like the right tool for the job.

Upvotes: 19

Related Questions