Next.js项目初始化遇Hydration失败错误，请求修复方案

你遇到的Hydration failed错误，核心原因是在RootLayout中手动编写了<title>和<meta>标签。Next.js App Router会自动根据你导出的metadata对象注入这些头部内容，手动重复编写会导致服务端渲染的HTML与客户端hydrate时的UI结构不一致。

修复步骤 #

删除layout.js中<head>标签内的手动<title>和<meta>代码，保留metadata配置让Next.js自动处理头部内容即可。

修改后的layout.js代码 #

import '../styles/globals.css';

export const metadata = {
    title: "Twitter",
    description: 'Share tweets'
}

const RootLayout = ({children}) => {
  return (
    <html lang="en">
      <head>
        {/* 无需手动添加title和meta，Next.js会自动注入metadata配置的内容 */}
      </head>
      <body>
        <div className="text-3xl">
          {children}
        </div>
      </body>
    </html>
  )
}

export default RootLayout

page.js代码无需修改，保持原样即可。

补充说明 #

在Next.js App Router的RootLayout中，<html>和<body>标签是必须保留的，但页面头部内容完全由metadata对象控制，手动添加重复的头部标签会触发Hydration不匹配问题。

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