NextJS 13.4.4（含src目录）布局仅首页生效，日历页Hydration报错求助

核心错误原因 #

你遇到的Hydration failed和Expected server HTML to contain a matching <html> in <div>错误，本质是日历页没有正确继承根布局，或者页面自身的HTML结构和根布局冲突导致的。

分步解决方案 #

1. 修正路由文件路径 #

你的日历页路径写的是src/page/calendar.tsx，这不符合NextJS 13 App Router的路由规则：

• 根布局src/app/layout.tsx仅对src/app/目录下的路由生效
• 正确的日历页路径应该是src/app/calendar/page.tsx（需先创建calendar文件夹，再在其中放置page.tsx）

若路径错误，NextJS会把该文件视为独立页面，不会应用根布局；如果页面自身渲染了<html>标签，就会出现服务器端HTML嵌套错误。

2. 移除页面中的顶层HTML标签 #

检查修正路径后的calendar/page.tsx，确保页面没有自行渲染<html>、<body>标签——这些顶层标签已由根布局src/app/layout.tsx负责渲染。

错误示例（会触发结构冲突）：

// 错误：页面不能包含顶层html/body标签
export default function CalendarPage() {
  return (
    <html>
      <body>
        <div>日历页面内容</div>
      </body>
    </html>
  );
}

正确示例：

// 正确：仅编写页面内容，根布局会自动完成包裹
export default function CalendarPage() {
  return <div>日历页面内容</div>;
}

3. 验证根布局的结构正确性 #

确保根布局src/app/layout.tsx符合NextJS 13的要求，必须包含<html>和<body>标签，且正确传递children：

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

如果根布局缺少<html>或<body>，或者未正确嵌套children，会导致子页面的渲染结构异常。

4. 排查客户端组件的Hydration不匹配 #

若前面的步骤无法解决问题，检查日历页是否使用了仅在客户端运行的代码（比如操作window、document），导致服务器渲染内容与客户端不一致：

• 对依赖客户端API的组件添加'use client'指令
• 若组件无法在服务器端渲染，使用dynamic导入并禁用SSR：

import dynamic from 'next/dynamic';

const CalendarComponent = dynamic(() => import('./CalendarComponent'), {
  ssr: false,
});

export default function CalendarPage() {
  return <CalendarComponent />;
}

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