那些遇到过的问题

Next.js 13 在启动新项目后立即抛出 3 个错误

Tsa*_*ary 19 reactjs next.js

这是我第一次使用测试版技术，所以也许这是可以预料的，我现在应该忽略这些错误吗？我对 Next.js 也非常陌生。

我已经跑去npx create-next-app@latest front --typescript -为我的应用程序代码创建一个新目录（将我的 API 分开，因为还有一个电子应用程序需要与其通信）。

  1. 我选择“否”来使用该src/目录。

  2. 我为实验/app目录选择了yes。

  3. 当询问有关配置导入别名时，我只是单击 Enter 并跳过。

当项目构建完成后，我运行npm run dev并发现了 3 个开箱即用的错误。

错误是-

其中两个：

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <main> in <body>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error
Run Code Online (Sandbox Code Playgroud)

其中之一：

Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
Run Code Online (Sandbox Code Playgroud)

这是控制台的完整日志：

    at main
    at ScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:149:1)
    at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:178:11)
    at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:334:9)
    at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:341:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:370:9)
    at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:377:11)
    at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:289:11)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:76:11)
    at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/render-from-template-context.js:12:34)
    at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:20:11)
    at body
    at html
    at ReactDevOverlay (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:58:9)
    at HotReload (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:19:11)
    at Router (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:99:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:63:9)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:76:11)
    at AppRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:20:13)
    at ServerRoot (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:126:11)
    at RSCComponent
    at Root (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:143:11)
overrideMethod @ react_devtools_backend.js:4012
console.error @ hydration-error-info.js?32aa:24
printWarning @ react-dom.development.js?d37d:94
error @ react-dom.development.js?d37d:68
warnForInsertedHydratedElement @ react-dom.development.js?d37d:10659
didNotFindHydratableInstance @ react-dom.development.js?d37d:13436
warnNonhydratedInstance @ react-dom.development.js?d37d:14601
tryToClaimNextHydratableInstance @ react-dom.development.js?d37d:14775
updateHostComponent @ react-dom.development.js?d37d:23001
beginWork @ react-dom.development.js?d37d:24831
beginWork$1 @ react-dom.development.js?d37d:32185
performUnitOfWork @ react-dom.development.js?d37d:31082
workLoopConcurrent @ react-dom.development.js?d37d:31068
renderRootConcurrent @ react-dom.development.js?d37d:31026
performConcurrentWorkOnRoot @ react-dom.development.js?d37d:29983
workLoop @ index.js?91dc:10
flushWork @ index.js?91dc:10
performWorkUntilDeadline @ index.js?91dc:10
react-dom.development.js?d37d:14726 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:14726:9)
    at tryToClaimNextHydratableInstance (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:14776:7)
    at updateHostComponent (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:22996:5)
    at beginWork (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24826:14)
    at HTMLUnknownElement.callCallback (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:4246:14)
    at Object.invokeGuardedCallbackDev (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:4295:16)
    at invokeGuardedCallback (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:4359:31)
    at beginWork$1 (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:32202:7)
    at performUnitOfWork (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:31077:12)
    at workLoopConcurrent (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:31063:5)
    at renderRootConcurrent (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:31021:7)
    at performConcurrentWorkOnRoot (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:29978:38)
    at workLoop (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/scheduler/index.js:11:3897)
    at flushWork (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/scheduler/index.js:11:3606)
    at MessagePort.performWorkUntilDeadline (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/scheduler/index.js:11:1787)
throwOnHydrationMismatch @ react-dom.development.js?d37d:14726
tryToClaimNextHydratableInstance @ react-dom.development.js?d37d:14776
updateHostComponent @ react-dom.development.js?d37d:23001
beginWork @ react-dom.development.js?d37d:24831
callCallback @ react-dom.development.js?d37d:4246
invokeGuardedCallbackDev @ react-dom.development.js?d37d:4295
invokeGuardedCallback @ react-dom.development.js?d37d:4359
beginWork$1 @ react-dom.development.js?d37d:32207
performUnitOfWork @ react-dom.development.js?d37d:31082
workLoopConcurrent @ react-dom.development.js?d37d:31068
renderRootConcurrent @ react-dom.development.js?d37d:31026
performConcurrentWorkOnRoot @ react-dom.development.js?d37d:29983
workLoop @ index.js?91dc:10
flushWork @ index.js?91dc:10
performWorkUntilDeadline @ index.js?91dc:10
react_devtools_backend.js:4012 Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.
overrideMethod @ react_devtools_backend.js:4012
console.error @ hydration-error-info.js?32aa:24
printWarning @ react-dom.development.js?d37d:94
error @ react-dom.development.js?d37d:68
errorHydratingContainer @ react-dom.development.js?d37d:13451
recoverFromConcurrentError @ react-dom.development.js?d37d:30105
performConcurrentWorkOnRoot @ react-dom.development.js?d37d:29996
workLoop @ index.js?91dc:10
flushWork @ index.js?91dc:10
performWorkUntilDeadline @ index.js?91dc:10
react_devtools_backend.js:4012 Warning: You are accessing "digest" from the errorInfo object passed to onRecoverableError. This property is deprecated and will be removed in a future version of React. To access the digest of an Error look for this property on the Error instance itself.
overrideMethod @ react_devtools_backend.js:4012
console.error @ hydration-error-info.js?32aa:24
printWarning @ react-dom.development.js?d37d:94
error @ react-dom.development.js?d37d:68
get @ react-dom.development.js?d37d:31630
onRecoverableError @ on-recoverable-error.js?eb92:8
commitRootImpl @ react-dom.development.js?d37d:31567
commitRoot @ react-dom.development.js?d37d:31330
finishConcurrentRender @ react-dom.development.js?d37d:30263
performConcurrentWorkOnRoot @ react-dom.development.js?d37d:30055
workLoop @ index.js?91dc:10
flushWork @ index.js?91dc:10
performWorkUntilDeadline @ index.js?91dc:10
on-recoverable-error.js?eb92:17 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:14726:9)
    at tryToClaimNextHydratableInstance (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:14776:7)
    at updateHostComponent (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:22996:5)
    at beginWork (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24826:14)
    at beginWork$1 (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:32180:14)
    at performUnitOfWork (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:31077:12)
    at workLoopConcurrent (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:31063:5)
    at renderRootConcurrent (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:31021:7)
    at performConcurrentWorkOnRoot (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:29978:38)
    at workLoop (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/scheduler/index.js:11:3897)
    at flushWork (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/scheduler/index.js:11:3606)
    at MessagePort.performWorkUntilDeadline (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/scheduler/index.js:11:1787)
throwOnHydrationMismatch @ react-dom.development.js?d37d:14726
tryToClaimNextHydratableInstance @ react-dom.development.js?d37d:14776
updateHostComponent @ react-dom.development.js?d37d:23001
beginWork @ react-dom.development.js?d37d:24831
beginWork$1 @ react-dom.development.js?d37d:32185
performUnitOfWork @ react-dom.development.js?d37d:31082
workLoopConcurrent @ react-dom.development.js?d37d:31068
renderRootConcurrent @ react-dom.development.js?d37d:31026
performConcurrentWorkOnRoot @ react-dom.development.js?d37d:29983
workLoop @ index.js?91dc:10
flushWork @ index.js?91dc:10
performWorkUntilDeadline @ index.js?91dc:10
react_devtools_backend.js:4012 Warning: You are accessing "digest" from the errorInfo object passed to onRecoverableError. This property is deprecated and will be removed in a future version of React. To access the digest of an Error look for this property on the Error instance itself.
overrideMethod @ react_devtools_backend.js:4012
console.error @ hydration-error-info.js?32aa:24
printWarning @ react-dom.development.js?d37d:94
error @ react-dom.development.js?d37d:68
get @ react-dom.development.js?d37d:31630
onRecoverableError @ on-recoverable-error.js?eb92:8
commitRootImpl @ react-dom.development.js?d37d:31567
commitRoot @ react-dom.development.js?d37d:31330
finishConcurrentRender @ react-dom.development.js?d37d:30263
performConcurrentWorkOnRoot @ react-dom.development.js?d37d:30055
workLoop @ index.js?91dc:10
flushWork @ index.js?91dc:10
performWorkUntilDeadline @ index.js?91dc:10
on-recoverable-error.js?eb92:17 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:14726:9)
    at tryToClaimNextHydratableInstance (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:14776:7)
    at updateHostComponent (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:22996:5)
    at beginWork (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24826:14)
    at beginWork$1 (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:32180:14)
    at performUnitOfWork (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:31077:12)
    at workLoopConcurrent (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:31063:5)
    at renderRootConcurrent (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:31021:7)
    at performConcurrentWorkOnRoot (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:29978:38)
    at workLoop (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/scheduler/index.js:11:3897)
    at flushWork (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/scheduler/index.js:11:3606)
    at MessagePort.performWorkUntilDeadline (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/scheduler/index.js:11:1787)
throwOnHydrationMismatch @ react-dom.development.js?d37d:14726
tryToClaimNextHydratableInstance @ react-dom.development.js?d37d:14776
updateHostComponent @ react-dom.development.js?d37d:23001
beginWork @ react-dom.development.js?d37d:24831
beginWork$1 @ react-dom.development.js?d37d:32185
performUnitOfWork @ react-dom.development.js?d37d:31082
workLoopConcurrent @ react-dom.development.js?d37d:31068
renderRootConcurrent @ react-dom.development.js?d37d:31026
performConcurrentWorkOnRoot @ react-dom.development.js?d37d:29983
workLoop @ index.js?91dc:10
flushWork @ index.js?91dc:10
performWorkUntilDeadline @ index.js?91dc:10
react_devtools_backend.js:4012 Warning: You are accessing "digest" from the errorInfo object passed to onRecoverableError. This property is deprecated and will be removed in a future version of React. To access the digest of an Error look for this property on the Error instance itself.
overrideMethod @ react_devtools_backend.js:4012
console.error @ hydration-error-info.js?32aa:24
printWarning @ react-dom.development.js?d37d:94
error @ react-dom.development.js?d37d:68
get @ react-dom.development.js?d37d:31630
onRecoverableError @ on-recoverable-error.js?eb92:8
commitRootImpl @ react-dom.development.js?d37d:31567
commitRoot @ react-dom.development.js?d37d:31330
finishConcurrentRender @ react-dom.development.js?d37d:30263
performConcurrentWorkOnRoot @ react-dom.development.js?d37d:30055
workLoop @ index.js?91dc:10
flushWork @ index.js?91dc:10
performWorkUntilDeadline @ index.js?91dc:10
on-recoverable-error.js?eb92:17 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:14726:9)
    at tryToClaimNextHydratableInstance (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:14776:7)
    at updateHostComponent (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:22996:5)
    at beginWork (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24826:14)
    at beginWork$1 (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:32180:14)
    at performUnitOfWork (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:31077:12)
    at workLoopConcurrent (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:31063:5)
    at renderRootConcurrent (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:31021:7)
    at performConcurrentWorkOnRoot (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:29978:38)
    at workLoop (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/scheduler/index.js:11:3897)
    at flushWork (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/scheduler/index.js:11:3606)
    at MessagePort.performWorkUntilDeadline (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/scheduler/index.js:11:1787)
throwOnHydrationMismatch @ react-dom.development.js?d37d:14726
tryToClaimNextHydratableInstance @ react-dom.development.js?d37d:14776
updateHostComponent @ react-dom.development.js?d37d:23001
beginWork @ react-dom.development.js?d37d:24831
beginWork$1 @ react-dom.development.js?d37d:32185
performUnitOfWork @ react-dom.development.js?d37d:31082
workLoopConcurrent @ react-dom.development.js?d37d:31068
renderRootConcurrent @ react-dom.development.js?d37d:31026
performConcurrentWorkOnRoot @ react-dom.development.js?d37d:29983
workLoop @ index.js?91dc:10
flushWork @ index.js?91dc:10
performWorkUntilDeadline @ index.js?91dc:10
react_devtools_backend.js:4012 Warning: You are accessing "digest" from the errorInfo object passed to onRecoverableError. This property is deprecated and will be removed in a future version of React. To access the digest of an Error look for this property on the Error instance itself.
overrideMethod @ react_devtools_backend.js:4012
console.error @ hydration-error-info.js?32aa:24
printWarning @ react-dom.development.js?d37d:94
error @ react-dom.development.js?d37d:68
get @ react-dom.development.js?d37d:31630
onRecoverableError @ on-recoverable-error.js?eb92:8
commitRootImpl @ react-dom.development.js?d37d:31567
commitRoot @ react-dom.development.js?d37d:31330
finishConcurrentRender @ react-dom.development.js?d37d:30263
performConcurrentWorkOnRoot @ react-dom.development.js?d37d:30055
workLoop @ index.js?91dc:10
flushWork @ index.js?91dc:10
performWorkUntilDeadline @ index.js?91dc:10
react-dom.development.js?d37d:22948 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 (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:22943:57)
    at beginWork (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24809:14)
    at beginWork$1 (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:32180:14)
    at performUnitOfWork (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:31077:12)
    at workLoopSync (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30886:5)
    at renderRootSync (webpack-interna

小智 0

尽管我没有从新项目开始，但我通过从根布局中删除每个自定义组件解决了此错误：

export async function generateStaticParams() {
  return i18n.locales.map((locale) => ({ lang: locale }));
}

export default function Root({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { lang: string };
}) {
  return (
    <html lang={params.lang} className="overflow-hidden">
      <body className="bg-night-500">{children}</body>
    </html>
  );
}
Run Code Online (Sandbox Code Playgroud)

然后我将根布局中使用的所有自定义组件移动到子布局中：在此输入图像描述

更多信息可以在文档中找到

我仍然不确定为什么您会从新项目中收到此错误，但这可能会帮助您调试问题。

归档时间：

查看次数：

3349 次

最近记录：

2 年，7 月 前
相关归档
对 Material UI Select 组件的更改做出反应测试库 23
你会如何在React-Relay应用程序中进行文件上传？ 16
react-navigation从嵌套的StackNavigator隐藏TabBar的屏幕 11
在测试中替换特定模块 10
在 Material-UI 选项卡中使用分隔线 8
Nextjs 和 Jest 变换/transformIgnorePatterns 不适用于 esm 模块 8
样式需要时间加载 - Next.js 5
是否可以在没有密钥的情况下验证 JWT 令牌？ 2
类型错误：无法读取未定义的属性（读取“join”） 1
有人有新的 Next JS 应用程序文件夹布局 RFC 的工作示例吗？ 0
难疑归档
如何撤消Git中最近的提交？ 20327
如何退出Vim编辑器？ 3558
如何确定数组是否包含Java中的特定值？ 2194
如何让Git忽略文件模式(chmod)的变化？ 2188
如何使div 100%的浏览器窗口高度？ 2016
如何一致地跨浏览器对齐复选框及其标签 1668
在Node.js中编写文件 1538
为什么Dictionary优先于Hashtable？ 1348
Git push需要用户名和密码 1327
从Docker容器内部,如何连接到本机的本地主机？ 1176