Next.js 13集成Chakra UI遇Hydration错误，页面无法自动刷新

你的问题核心是RootLayout缺少必需的<body>标签，且未正确应用字体类名，这直接导致了Hydration不匹配和热刷新失效。以下是具体修复方案：

修复RootLayout结构 #

Next.js 13的App Router要求根布局必须同时包含<html>和<body>标签，你当前的代码把Providers直接放在<html>下，跳过了<body>，违反了框架渲染规则，引发Hydration错误；同时未将Inter字体的className绑定到body上，也会导致样式渲染不匹配。

修改后的layout.tsx代码：

import './globals.css'
import { Inter } from 'next/font/google'
import Providers from "@/app/chakra-provider";

// 初始化字体实例
const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      {/* 必须保留body标签，同时绑定字体类名 */}
      <body className={inter.className}>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  )
}

额外排查点 #

如果修复后仍有Hydration错误，检查以下内容：

• 确保@chakra-ui/next-js、@chakra-ui/react的版本与Next.js 13兼容，建议使用最新稳定版
• 检查页面中是否有仅在客户端运行的代码，比如操作window/document，这类代码需要用useEffect包裹，或放在标注'use client'的组件中延迟执行
• 清除浏览器缓存和Next.js构建缓存，执行rm -rf .next后重启开发服务

你的provider.tsx代码是正确的，'use client'指令及CacheProvider+ChakraProvider的嵌套顺序符合官方要求，无需修改。

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