Next.js+Tailwind CSS 运行时错误及Hydration问题求助

错误现象 #

• 浏览器抛出：

  Unhandled Runtime Error
  Error: Text content does not match server-rendered HTML.

• 控制台警告指向Navbar.jsx中的Image组件：

  Warning: Received false for a non-boolean attribute className.
  If you used to conditionally omit it with className={condition && value}, pass className={condition ? value : undefined} instead.

问题根源 #

Hydration错误是className非法传值的连锁反应：当给className传入布尔值false时，服务端会渲染出className="false"的DOM节点，但客户端React期望该属性不存在（或为合法字符串），导致服务端与客户端DOM结构不匹配，触发Hydration失败。

修复步骤 #

1. 打开components/Navbar.jsx，找到第95行的Image组件
2. 检查该组件的className属性写法，通常错误写法为：

   <Image className={themeCondition && "your-tailwind-class"} ... />
   

3. 将其修改为三元表达式，条件不满足时传入undefined：

   <Image className={themeCondition ? "your-tailwind-class" : undefined} ... />
   

   或者使用模板字符串确保始终返回字符串：

   <Image className={`fixed-class ${themeCondition ? "dynamic-class" : ""}`} ... />
   

验证 #

重启Next.js开发服务器，控制台的className警告会消失，Hydration错误也会随之解决——此时服务端与客户端渲染的DOM结构完全一致。

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