Menu
It's my first time working with a technology in beta so maybe this is to be expected and I should just ignore these erros for now? I'm also extremely new to Next.js.
I've ran npx create-next-app@latest front --typescript - to create a new directory for my app code (will keep my API separated as there's also an electron app that needs to communicate with it).
I chose no for using the src/ directory.
I chose yes for the experimental /app directory.
I simply clicked enter and skipped when asked about configuring an import alias.
When the project was built, I ran npm run dev and I am getting 3 errors out of the box.
Errors are-
Two of this:
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
One of this:
Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
This is the complete log from the console:
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-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30851:7)
at recoverFromConcurrentError (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30104:20)
at performConcurrentWorkOnRoot (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:29991:22)
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)```
345
In Next.js 13, it is not allowed to have certain elements as children of other elements, such as having a div inside a p tag etc.
This is because it can cause issues with the HTML structure and accessibility of the page, and can also lead to unexpected rendering behavior.
To avoid this issue, you should make sure that your components generate HTML that conforms to the rules of the DOM structure. For example, instead of using a div inside a p tag, you can use a span or other appropriate tag to achieve the same visual effect. Check all page, layout and other files.
198
answered Dec 11 '25 14:12
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
