如何在Next.js中通过router.push在新标签页打开链接

如果你想让点击按钮后在新标签页打开链接，router.push本身不支持直接指定新标签页打开，可以用以下两种方案实现：

方案一：使用window.open #

直接在点击事件里调用浏览器原生的window.open方法，指定_blank参数即可打开新标签页：

import { useRouter } from "next/navigation";

const router = useRouter();

<Button
  onClick={() => {
    window.open(`${mylink}`, '_blank');
  }}
>
  Order
</Button>

方案二：用<a>标签配合属性 #

如果不需要复杂的点击逻辑，直接用HTML的<a>标签更符合语义化，Next.js会自动优化内部路由：

<Button as="a" href={mylink} target="_blank" rel="noopener noreferrer">
  Order
</Button>

注意：添加rel="noopener noreferrer"是安全最佳实践，能防止新页面通过window.opener访问原页面的上下文，避免安全风险。

额外说明 #

• 跳转Next.js内部路由（比如/user/profile）时，两种方案都可行，用<a>标签会更简洁。
• 跳转外部链接时，两种方案都能正常工作，推荐优先用带rel属性的<a>标签。

内容的提问来源于stack exchange，提问作者Hoomi