升级至Next.js 13后出现Invalid <Link>包含<a>子元素错误

Next.js 13 对Link组件的实现做了变更，不再允许在Link内部嵌套原生<a>标签，你当前的代码写法在旧版本Next.js中可以正常运行，但在13版本里会触发这个错误。

错误代码： #

<Link href="/contact">
  <a>
    Contact
  </a>
</Link>

修正后的代码： #

直接移除内部的<a>标签，Link组件会自动渲染为具备客户端导航能力的<a>元素：

<Link href="/contact">
  Contact
</Link>

如果需要给链接文本添加样式，直接在Link组件上设置className即可：

<Link href="/contact" className="your-link-class">
  Contact
</Link>

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