Next.js中Link与react-bootstrap Nav.Link混用致Hydration失败咨询

核心结论 #

必须用Next.js的<Link>实现客户端路由（避免页面刷新），同时保留React-Bootstrap Nav.Link的样式，关键是不要嵌套两个<a>标签——这就是你遇到Hydration错误的根源。

具体解决方案分两种场景： #

1. 用Next.js Pages Router（pages目录）

直接让Nav.Link以Next的Link作为底层渲染组件，既保留导航栏样式，又实现无刷新路由：

import Link from 'next/link';
import { Nav } from 'react-bootstrap';

// 写法示例
<Nav>
  <Nav.Link as={Link} href="/home">首页</Nav.Link>
  <Nav.Link as={Link} href="/about">关于我们</Nav.Link>
</Nav>

2. 用Next.js App Router（app目录）

App Router的Link不再默认渲染<a>标签，需把Nav.Link改为渲染<span>，再内部嵌套Next的Link：

import Link from 'next/link';
import { Nav } from 'react-bootstrap';

// 写法示例
<Nav>
  <Nav.Link as="span">
    <Link href="/home">首页</Link>
  </Nav.Link>
  <Nav.Link as="span">
    <Link href="/about">关于我们</Link>
  </Nav.Link>
</Nav>

为什么会出现Hydration错误？ #

当你嵌套Link和Nav.Link时，服务器端会渲染出<a><a>...</a></a>的嵌套结构，但客户端渲染时React会发现DOM结构不匹配，触发"初始UI与服务器渲染不一致"的错误——本质是两个<a>标签嵌套违反HTML规范，导致前后端渲染结果冲突。

为什么不能只用Nav.Link？ #

Nav.Link默认是普通HTML <a>标签，跳转时会整页刷新，完全失去Next.js客户端路由的优势（SPA无刷新体验、性能优化），所以必须结合Next的Link实现路由。

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