How to open a link in a new tab in nextjs

在Next.js中，打开一个新的浏览器标签（Tab）显示链接通常涉及到在<a>标签中设置target属性为_blank。这是HTML标准的一部分，并不是Next.js特有的功能。要在Next.js的Link组件中实现这一点，你需要在Link组件内部放置一个<a>标签，并在这个<a>标签上设置 target="_blank"属性。

这里有一个例子：

jsx
import Link from 'next/link';

const MyComponent = () => {
  return (
    <div>
      <h1>我的页面</h1>
      <Link href="/about">
        <a target="_blank" rel="noopener noreferrer">关于我们</a>
      </Link>
    </div>
  );
};

export default MyComponent;

在这个例子中，用户点击“关于我们”的链接时，将会在一个新的浏览器标签中打开/about页面。

这里还使用了rel="noopener noreferrer"属性，这是为了安全考虑。这样可以防止新打开的页面对原始页面拥有潜在的引用，并保护用户免受window.opener API可能导致的恶意行为。这是一种非常推荐的做法，特别是在使用target="_blank"时。

由于这是外部链接，因此您不需要使用 Link

shell
<a target="_blank" href="https://twitter.com/" rel="noopener noreferrer">
    <div className={`${dark ? styles.iconTwitterWhite : styles.iconTwitter} mr-3`} />
 </a>

2022 年 11 月 答复：

随着 Next 13 的发布，该<Link/>组件现在在内部呈现<a/>标签，因此您不再需要添加子<a/>标签。

这意味着为了在新选项卡中打开链接，您应该能够执行以下操作：

<Link href="https://google.com" rel="noopener noreferrer" target="_blank"> Google </Link>

我听说有些情况下你想坚持使用Link（国际化的东西Link有帮助），这样你就可以使用passHref（它只是将其传递href给直接的孩子），如下所示：

shell
<Link href="/" passHref>
  <a target="_blank" rel="noopener noreferrer">
    Foo
  </a>
</Link>

我尝试了下面的代码片段，它工作正常，没有错误。否则，我的 localhost 可以正常工作，但当我部署到 Vercel 时，它会在构建日志中出现错误。因此，我尝试了此代码片段，它可以在 localhost 和 Vercel 上正常工作。

shell
<Link href="https://twitter.com/">
  <a target="_blank" rel="noopener noreferrer" className='link-item'>
    <div className={`${dark ? styles.iconTwitterWhite : styles.iconTwitter} mr-3`} />
  </a>
</Link>

运行代码片段Hide results

展开片段

确保将属性target="_blank"添加到标签中。rel="noopener noreferrer"``a