Next.js 14中React组件HTML含$符号引发Hydration错误的解决求助

问题核心 #

Hydration错误本质是服务端渲染的HTML与客户端hydration生成的DOM内容/结构不匹配。这里的$符号本身在JSX纯文本中不会触发变量解析，但可能因Next.js的SSR解析逻辑、第三方组件的客户端渲染干扰，导致两端处理结果出现差异。

可行解决方案 #

1. 显式声明纯文本字符串 #

将含$的文本用大括号包裹成字符串表达式，明确告诉React这是纯文本内容，避免解析歧义：

<p className="text-xl font-normal"> {'from $199/month or $999'} </p>

2. 使用模板字符串包裹 #

即使没有变量插入，用模板字符串包裹也能规避解析问题：

<p className="text-xl font-normal"> {`from $199/month or $999`} </p>

3. 转义$符号（备选） #

若遇到特殊解析场景，可在字符串表达式中用反斜杠转义$：

<p className="text-xl font-normal"> {'from \\$199/month or \\$999'} </p>

4. 排查动态组件干扰 #

你的GSAPComponent设置了ssr: false，仅在客户端渲染。需确认它是否会修改<p>标签的内容或结构，导致两端DOM不一致。可临时注释该组件，测试是否仍出现Hydration错误，以此排查干扰源。

验证方式 #

修改代码后重启Next.js开发服务器，检查页面渲染状态及浏览器控制台是否仍有Hydration报错。

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