Next.js Link组件中a标签的作用及版本适配说明

嘿，这个问题其实是Next.js版本迭代带来的差异导致的，我给你理清楚前因后果：

Next.js v12及更早版本（不含v12.2的实验特性） #

• 早期的Link组件本质上只是个客户端路由逻辑容器，它本身不会渲染出可点击的DOM元素。你可以理解成它只负责处理跳转的逻辑，但没有“实体”。
• 如果你直接写<Link href="/">返回首页</Link>，虽然点击确实能跳转，但那段文字只是普通文本：没有<a>标签自带的默认样式（比如下划线、hover变色），不符合HTML语义化规范，甚至屏幕阅读器可能识别不出这是一个可交互的链接。
• 这时候手动嵌套<a>标签就完全必要了：Link管路由跳转的逻辑，<a>管渲染可点击的DOM节点，两者各司其职，一点都不冗余。

Next.js v12.2（实验特性）及v13+版本 #

• 从v12.2开始，官方推出了让Link自动渲染<a>标签的实验功能，到v13直接把这个特性设为默认了。
• 现在的Link组件已经把<a>的功能整合进去了，它会自动在底层生成<a>元素，还支持传递所有<a>标签的props（比如className、target="_blank"这些）。
• 这时候再手动嵌套<a>反而会出问题（比如页面上出现嵌套的a标签，导致不符合HTML规范），所以直接写<Link href="/">返回首页</Link>就完全OK，既满足语义化，又能正常实现客户端路由跳转。

代码示例对比 #

Next.js v12及更早版本写法

import Link from 'next/link'

// 必须嵌套<a>，否则文本无交互语义
<Link href="/about">
  <a>关于</a>
</Link>

Next.js v13+版本写法

import Link from 'next/link'

// Link自动渲染<a>，无需手动嵌套
<Link href="/about">
  关于
</Link>

内容的提问来源于stack exchange，提问作者Aurélien