• • 1. Next.js Link组件内部UI组件的解决方案。**

我更详细地研究了Next.js文档，发现了一个非常有用的属性，可以在Link组件中为任何内部UI组件（Semantic UI、Material UI、Reactstrap等）创建外部链接。
我们以一个简单的语义UI按钮组件为例，要在Next.js Link组件中添加外部链接，需要使用passHref属性，该属性默认设置为false，该属性强制Link将href属性发送给其子元素。

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. HTML元素的解决方案（不同于标记A）**

在Next.js文档中，您可以找到以下句子：
外部URL和任何不需要使用/pages进行路径导航的链接都不需要使用Link来处理;在这种情况下使用锚标记。
而且我不得不写这是显而易见的，所以在这种情况下，如果你需要使用任何其他的标签，例如，HTML按钮，你应该使用onClick事件在它没有链接组件.上面的代码将看起来像这样：

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

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

export default Example;

• • 更新**：当然，我同意开发人员的观点，对于外部链接，我们不应该使用Link组件，这里最好的解决方案是只使用纯HTML a标签或点击事件的JS重定向解决方案，如第2点所示（或任何类似的方式）值得一提的是，您可以构建自己的组件，并且可以基于传递的href属性在Link组件和HTML a标记之间切换，如下所示：

// 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" />

Link组件仅用于Next应用中页面之间的链接。传递外部URL是不受支持的行为，并且会向您显示链接到this page的错误，其中包括以下部分：

发生此错误的原因

Next.js提供了一个路由器，可以通过next/link导入的组件、wrapper with Router（Component）和现在的hook useRouter（）来使用。当使用其中任何一个时，希望它们只用于内部导航，即在同一个Next.js应用程序中的页面之间导航。
要么您将非内部href传递给了next/link组件，要么您使用href调用了Router#push或Router#replace。
无效的href包括外部站点（https://google.com）和mailto：链接。在过去，使用这些无效的href可能不会被注意到，但因为它们可能会导致意外的行为。我们现在在开发中显示了一个警告。
如果你在内部呈现一个<a>，href会被传递给它，并使用本机浏览器行为按预期工作，但其他元素不能使用它，所以你必须自己处理这种情况。
我建议您看看您想要实现什么--使用<a>标记有什么问题吗？它似乎是适合这项工作的工具。

在我看来，公认的答案是错误的。当<a>标签不是<Link>的子标签时，使用passHref。对于外部URL，只需使用<a>而不使用<Link>，见下文。

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>;

简单地说，使用<a>标记而不是下一个<Link>，下一个<Link>用于内部导航。
示例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>

这解决了链接打开一个新链接的同时关闭主站点的问题。主要要注意的是属性：

1. target={"_blank"}
2. rel={"noreferrer"}
   我也尝试了各种组合，在仔细阅读文件后找到了这一点，尽管文件没有含蓄地说出来。文件涵盖了更多的做，而不是所有的假设。

我也遇到过同样的问题，不知怎么的，我试了一下上面的答案，并没有什么帮助。我发现如果你添加https或HTTP：//，它肯定会自动允许你打开外部网站。下面是一个例子：

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

对于外部链接，无需使用next/link，因为它仅用于路由之间的客户端转换。Link不适用于应用外部的链接。

如果你从API获取网站URL，那么你需要调用如下URL。在我的例子中，我获取网站URL如下

{website : "nicobar.com"}

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