如何在Next.js中使用onClick函数实现箭头跳转新标签页

针对你的需求，这里有两种简单的实现方式，适合Next.js初学者：

方法一：通过onClick事件直接处理 #

直接给ArrowRight的onClick属性添加打开新标签页的逻辑，代码如下：

<ArrowRight
  className="heart"
  onClick={() => window.open('https://google.com', '_blank', 'noopener noreferrer')}
/>

• 说明：_blank指定在新标签页打开；noopener noreferrer是安全参数，防止新打开的页面获取原页面控制权，规避安全风险。

方法二：用a标签包裹（更符合语义化） #

把ArrowRight放在HTML原生<a>标签里，利用链接的默认行为实现，这种方式还支持右键“在新标签页打开”等浏览器原生操作，更推荐使用：

<a 
  href="https://google.com" 
  target="_blank" 
  rel="noopener noreferrer"
  style={{ textDecoration: 'none', color: 'inherit' }} // 消除a标签默认的下划线和颜色变化
>
  <ArrowRight className="heart" />
</a>

• 注意：Next.js的next/link组件是用于内部页面路由的，外部链接用普通<a>标签即可，不要混用。

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