Next.js 13 水化错误问题求助（附演示视频）

算力阿峰

2026-8-6

问题背景

基于最新版Next.js创建应用后，测试App Router时遇到水化错误。当频繁切换about和contact页面并同步刷新时，会触发Hydration failed because the initial UI does not match what was rendered on the server的错误提示。该错误仅在页面引入Footer组件时出现，移除Footer后则完全正常。

相关代码

app/about/page.js

import Link from 'next/link'
import { Footer } from '../Footer'

export default function Page() {
    return (
        <>
            <Link href="/about">about</Link>
            <Link href="/contact">contact</Link>
            <Footer />
        </>
    )
}

app/contact/page.js

import Link from 'next/link'
import { Footer } from '../Footer'

export default function Page() {
    return (
        <>
            <Link href="/about">about</Link>
            <Link href="/contact">contact</Link>
            <Footer />
        </>
    )
}

export function Footer() {
    return (
        <footer>Footer</footer>
    )
}

项目代码托管在GitHub仓库。

解决方案

针对这类场景的水化错误，可尝试以下几种修复方式：

将Footer提升到根布局
把Footer组件移到app/layout.js中作为全局布局的一部分，避免在每个页面重复引入，从根源上规避页面切换时的重复渲染冲突：
```
// app/layout.js
import { Footer } from './Footer'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Footer />
      </body>
    </html>
  )
}
```
之后从about和contact页面中移除Footer的导入与调用。
为Footer添加客户端渲染指令
在Footer组件顶部添加'use client'标识，强制组件仅在客户端渲染，消除服务端与客户端的渲染差异：
```
// app/footer.jsx
'use client'

export function Footer() {
    return (
        <footer>Footer</footer>
    )
}
```
检查文件路径大小写一致性
确认Footer组件的导入路径大小写完全匹配（比如../Footer和../footer的区别），Next.js文件系统路由对大小写敏感，路径不匹配可能导致服务端与客户端解析组件不一致。