React 18中Next.js Link嵌套多div触发Hydration失败问题求助

问题原因 #

你遇到的「Hydration failed because the initial UI does not match what was rendered on the server」错误，核心原因是Next.js的Link组件本身会渲染一个<a>标签，而你在Link内部又嵌套了另一个<a>标签，导致服务器端渲染的DOM结构和客户端Hydrate时的结构不一致，触发了React的Hydration校验错误。

修复步骤 #

1. 直接移除代码里的<a>标签——Link已经提供了跳转功能，不需要额外的a标签实现点击跳转。
2. 把原<a>标签上的样式类（block relative rounded overflow-hidden）转移到包裹图片的div或外层元素上，保证样式不受影响。

修复后的代码 #

<Link href={'/product/wearcode'}>
  <div className="lg:w-1/4 md:w-1/2 p-4 w-full">
    <div className="block relative rounded overflow-hidden">
      <img
        alt="ecommerce"
        className="m-auto h-[30vh] md:h-[36vh] block"
        src="https://m.media-amazon.com/images/I/51QK16k7I6L._UL1000_.jpg"
      />
    </div>
    <div className="mt-4 text-center">
      <h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
        T-Shirts
      </h3>
      <h2 className="text-gray-900 title-font text-lg font-medium">
        Wear The Code
      </h2>
      <p className="mt-1">₹216</p>
      <p className="mt-1">S, M, L, XL, XXL</p>
    </div>
  </div>
</Link>

额外说明 #

只要用Link包裹住整个div区域，就能实现点击任意区域跳转的效果，不需要额外嵌套a标签。Next.js的Link会自动将点击事件绑定到内部所有内容上。

内容的提问来源于stack exchange，提问作者Amir 4ever