如何使用Next.js的Link组件无需a标签实现新标签页打开链接

问题原因说明 #

你遇到的两个问题分别对应Next.js新旧版本的Link组件特性差异：

• Next.js 13+ 版本的Link组件默认渲染原生a标签，不需要额外嵌套a标签，嵌套会触发多子元素报错
• Next.js 12及更早版本的Link组件本身不处理target等a标签专属属性，属性直接加在Link上会失效

对应版本解决方案 #

方案1：Next.js 13及以上版本（符合不使用a标签的要求） #

直接将target="_blank"加在Link组件上即可，无需嵌套a标签，建议同时添加安全属性rel="noopener noreferrer"：

<Link href={URL} target="_blank" rel="noopener noreferrer">
  跳转链接文本
</Link>

方案2：Next.js 12及更早版本 #

必须在Link内部嵌套唯一的a标签，target属性加在a标签上即可：

<Link href={URL}>
  <a target="_blank" rel="noopener noreferrer">跳转链接文本</a>
</Link>

额外说明 #

如果你使用Next.js 13+版本但需要兼容旧写法，可以在next.config.js中配置experimental.newNextLinkBehavior: false关闭默认渲染a标签的特性，就可以继续使用嵌套a标签的写法。

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