Next.js Turbopack 出现控制台/水合错误，求排查建议

首先看你贴的根布局代码，body标签里{children}后面有一串多余的空格，这就是直接触发错误的原因之一，先把这些空格删掉，修改后的代码应该是：

import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.className} antialiased`}>{children}</body>    
    </html>
  );
}

如果修改后还是有问题，按下面的方向逐一排查：

• 检查所有子组件的JSX结构：很多时候问题不在根布局，而是子组件里的标签间有多余的换行或空格。比如<div> <p>内容</p> </div>这种，标签和子元素之间的空格会被渲染成空白文本节点，改成<div><p>内容</p></div>或者用<>...</>包裹时注意不要留空格。
• 警惕Fragment的隐性空白：使用短语法<>时，不要在标签前后加空格，比如<> {children} </>会生成空白节点，改成<> {children}</>或者直接<>{children}</>。
• 动态内容导致的水合不匹配：如果页面里有服务端渲染和客户端渲染不一致的内容（比如依赖window对象的代码在服务端执行），也可能触发类似的水合错误，这时候要确保动态内容只在客户端渲染，比如用useEffect或者dynamic组件禁用SSR。
• 检查第三方UI组件：如果用了Ant Design、Tailwind UI这类组件库，某些组件可能会生成意外的空白节点，尝试暂时移除第三方组件，看错误是否消失，逐步定位问题组件。
• 开启严格模式排查：在next.config.js里开启reactStrictMode: true，严格模式会放大水合不匹配的问题，帮助你更快找到根源。

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