NextJS Hydration失败求助：使用NextLink出现HTML标签匹配错误

错误原因 #

出现Hydration failed because the initial UI does not match what was rendered on the server.和Expected server HTML to contain a matching <a> in <a>错误的核心是DOM结构冲突：

• NextLink（next/link导出的组件）默认会渲染一个<a>标签
• 你给MenuItem设置了as={Link}，不管是Chakra UI的Link还是Next.js的Link，都会生成另一个<a>标签
• 两者叠加产生了<a><a>...</a></a>的嵌套结构，服务器端渲染的HTML和客户端Hydration时的结构不匹配，触发了错误。

解决方案 #

直接移除MenuItem的as={Link}属性，利用NextLink的passHref把路由地址传递给MenuItem即可，修改后的代码如下：

<Box flex={1} align="right">
  <Box ml={2} display={{ base: 'inline-block', md: 'none' }}>
    <Menu>
      <MenuButton
        as={IconButton}
        icon={<HamburgerIcon />}
        variant="outline"
        aria-label="Options"
      />
      <MenuList>
        <NextLink href="/" passHref>
          <MenuItem> About</MenuItem>
        </NextLink>
        <NextLink href="/" passHref>
          <MenuItem> Work</MenuItem>
        </NextLink>
      </MenuList>
    </Menu>
  </Box>
</Box>

补充说明 #

使用NextLink时，务必避免在其内部嵌套任何会生成<a>标签的组件（原生<a>或自定义Link组件），这是引发此类Hydration错误的常见原因。去掉as={Link}后，MenuItem会直接接收NextLink传递的href，既保留了菜单的交互样式，又保证了DOM结构的正确性，服务器和客户端渲染结果一致，错误自然消失。

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