Chrome浏览器中Next.js项目Hydration失败问题求助

问题情况 #

今日早上启动正在开发的Next.js项目，在Chrome浏览器的开发服务器中运行时，触发错误：Error: Hydration failed because the initial UI does not match what was rendered on the server。尝试了Next.js官方文档及Stack Overflow上的多种解决方案均无效，新建空白Next.js测试项目后仍出现相同错误。

错误日志 #

react-dom.development.js?160d:94 Warning: Expected server HTML to contain a matching <div> in <body>.
    at div
    at InnerLayoutRouter (webpack-internal:///./node_modules/next/dist/client/components/layout-router.js:124:11)
    at RedirectErrorBoundary (webpack-internal:///./node_modules/next/dist/client/components/layout-router.js:303:9)
    at RedirectBoundary (webpack-internal:///./node_modules/next/dist/client/components/layout-router.js:310:11)
    at NotFoundErrorBoundary (webpack-internal:///./node_modules/next/dist/client/components/layout-router.js:339:9)
    at NotFoundBoundary (webpack-internal:///./node_modules/next/dist/client/components/layout-router.js:346:11)
    at LoadingBoundary (webpack-internal:///./node_modules/next/dist/client/components/layout-router.js:258:11)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/client/components/error-boundary.js:40:11)
    at RenderFromTemplateContext (webpack-internal:///./node_modules/next/dist/client/components/render-from-template-context.js:12:34)
    at OuterLayoutRouter (webpack-internal:///./node_modules/next/dist/client/components/layout-router.js:18:11)
    at body
    at html
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:53:9)
    at HotReload (webpack-internal:///./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:19:11)
    at Router (webpack-internal:///./node_modules/next/dist/client/components/app-router.js:97:11)
    at ErrorBoundaryHandler (webpack-internal:///./node_modules/next/dist/client/components/error-boundary.js:28:9)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/client/components/error-boundary.js:40:11)
    at AppRouter
    at ServerRoot (webpack-internal:///./node_modules/next/dist/client/app-index.js:113:11)
    at RSCComponent
    at Root (webpack-internal:///./node_modules/next/dist/client/app-index.js:130:11)
printWarning @ react-dom.development.js?160d:94
react-dom.development.js?160d:14706 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js?160d:14706:1)
    at tryToClaimNextHydratableInstance (react-dom.development.js?160d:14756:1)
    at updateHostComponent (react-dom.development.js?160d:22897:1)
    at beginWork (react-dom.development.js?160d:24709:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js?160d:4246:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?160d:4295:1)
    at invokeGuardedCallback (react-dom.development.js?160d:4359:1)
    at beginWork$1 (react-dom.development.js?160d:31944:1)
    at performUnitOfWork (react-dom.development.js?160d:30853:1)
    at workLoopConcurrent (react-dom.development.js?160d:30839:1)
    at renderRootConcurrent (react-dom.development.js?160d:30797:1)
    at performConcurrentWorkOnRoot (react-dom.development.js?160d:29844:1)
    at workLoop (index.js?82e4:10:3922)
    at flushWork (index.js?82e4:10:3630)
    at MessagePort.performWorkUntilDeadline (index.js?82e4:10:1812)
react-dom.development.js?160d:94 Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.
printWarning @ react-dom.development.js?160d:94
3react-dom.development.js?160d:31301 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js?160d:14706:1)
    at tryToClaimNextHydratableInstance (react-dom.development.js?160d:14756:1)
    at updateHostComponent (react-dom.development.js?160d:22897:1)
    at beginWork (react-dom.development.js?160d:24709:1)
    at beginWork$1 (react-dom.development.js?160d:31919:1)
    at performUnitOfWork (react-dom.development.js?160d:30853:1)
    at workLoopConcurrent (react-dom.development.js?160d:30839:1)
    at renderRootConcurrent (react-dom.development.js?160d:30797:1)
    at performConcurrentWorkOnRoot (react-dom.development.js?160d:29844:1)
    at workLoop (index.js?82e4:10:3922)
    at flushWork (index.js?82e4:10:3630)
    at MessagePort.performWorkUntilDeadline (index.js?82e4:10:1812)
react-dom.development.js?160d:22844 Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
    at updateHostRoot (react-dom.development.js?160d:22844:1)
    at beginWork (react-dom.development.js?160d:24692:1)
    at beginWork$1 (react-dom.development.js?160d:31919:1)
    at performUnitOfWork (react-dom.development.js?160d:30853:1)
    at workLoopSync (react-dom.development.js?160d:30689:1)
    at renderRootSync (react-dom.development.js?160d:30654:1)
    at recoverFromConcurrentError (react-dom.development.js?160d:29970:1)
    at performConcurrentWorkOnRoot (react-dom.development.js?160d:29857:1)
    at workLoop (index.js?82e4:10:3922)
    at flushWork (index.js?82e4:10:3630)
    at MessagePort.performWorkUntilDeadline (index.js?82e4:10:1812)

浏览器表现差异 #

• Chrome浏览器：触发上述Hydration错误
• Edge浏览器：无错误，项目正常运行
• Brave浏览器：无错误，项目正常运行

运行截图 #

• Chrome浏览器运行截图：
• Edge浏览器运行截图：

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