Rendering content (e.g. text) outside of an element directly underneath <body> causes a hydration error (when <body> is defined in page.tsx, not layout.tsx) #76815

rik-iso · 2025-03-01T22:03:38Z

rik-iso
Mar 1, 2025

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/red-rain-64zvnc

To Reproduce

Create a page.tsx with the minimal example below (and on sandbox).
Create a layout.tsx which does not include any elements, just returns children.
Observe hydration error copied below.

workarounds:

this does not repro if is moved into layout. I added a non-repro example on the sandbox too.
wrapping with a div

repro code

export default function Page() {
  return (
    <html lang="en">
      <body>have a great day</body>
    </html>
  );
}

Current vs. Expected behavior

expected: no hydration error

got:

on-recoverable-error.js:28 Uncaught Error: Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

https://react.dev/link/hydration-mismatch

  ...
    <RootLayout>
      <SomeProviderWrappingChildren>
        <OuterLayoutRouter parallelRouterKey="children" template={<RenderFromTemplateContext>} notFound={[...]}>
          ...
            <InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
              <ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
                <LoadingBoundary loading={null}>
                  <HTTPAccessFallbackBoundary notFound={[...]} forbidden={undefined} unauthorized={undefined}>
                    <HTTPAccessFallbackErrorBoundary pathname="/" notFound={[...]} forbidden={undefined} ...>
                      <RedirectBoundary>
                        <RedirectErrorBoundary router={{...}}>
                          <InnerLayoutRouter url="/" tree={[...]} cacheNode={{lazyData:null, ...}} segmentPath={[...]}>
                            <Page>
                              <html lang="en">
                                <body>
+                                 have a great day
-                                 {"have a great day(self.__next_f=self.__next_f||[]).push([0])self.__next_f.push([1..."}
                            ...

    at Page (page.tsx:4:7)

Provide environment information

(below but also repros on sandbox)

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.3.0: Thu Jan  2 20:24:23 PST 2025; root:xnu-11215.81.4~3/RELEASE_ARM64_T6020
  Available memory (MB): 32768
  Available CPU cores: 12
Binaries:
  Node: 22.13.1
  npm: 9.6.7
  Yarn: N/A
  pnpm: 9.15.4
Relevant Packages:
  next: 15.2.0 // Latest available version is detected (15.2.0).
  eslint-config-next: N/A
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.7.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

React

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local)

Additional context

This is happening in in 15.1.7, 15.2 and the latest 15.3 canary as of testing (on sandbox).

Answered by samcx

Mar 4, 2025

@rik-iso The correct convention is to have the <html> and <body> in the Root Layout → https://nextjs.org/docs/app/getting-started/layouts-and-pages#creating-a-layout.

on-recoverable-error.js:28 Uncaught Error: Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML…

View full answer

oreninjas · 2025-03-02T11:06:56Z

oreninjas
Mar 2, 2025

Hey there, the exact same issue i'm facing too from yesterday, is there any solution??

0 replies

rik-iso · 2025-03-02T16:06:49Z

rik-iso
Mar 2, 2025
Author

Hey there, the exact same issue i'm facing too from yesterday, is there any solution??

Are you rendering text directly under body? If so, it's this bug - and you can wrap it in a div and it'll solve the problem.

Looking at your error though this might be a general hydration issue (not this bug) related to those parameters on body - if you're not adding them during SSR and only adding them during CSR then this error will (correctly) occur. The docs have a few solutions,

0 replies

oreninjas · 2025-03-03T13:12:55Z

oreninjas
Mar 3, 2025

Hey i got the solution i had added new extension i dont know maybe it was curropted after removing it all worked just fine, thanks!

0 replies

samcx · 2025-03-04T20:17:57Z

samcx
Mar 4, 2025
Maintainer

@rik-iso The correct convention is to have the <html> and <body> in the Root Layout → https://nextjs.org/docs/app/getting-started/layouts-and-pages#creating-a-layout.

on-recoverable-error.js:28 Uncaught Error: Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting. // ← this error!

0 replies

rik-iso · 2025-03-06T01:08:49Z

rik-iso
Mar 6, 2025
Author

Hi @samcx - thanks, good to know, I must have missed that specific.

Can Next.js throw a more appropriate error if this mistake is made instead of this one? Nothing about this error told me "you are missing a root layout" - and in fact my code works fine (as far as I can tell) outside of this issue without doing it so it wasn't obvious this was an issue.

2 replies

rik-iso Mar 6, 2025
Author

Ah I guess the point you're getting at is that Next.js never expects body to have a single text child because it should at minimum be wrapping {children}, so the router rendering a page inside it. Fair enough.

samcx Mar 6, 2025
Maintainer

@rik-iso Hmmm this is the error when I access /repro I get when I clone your CodeSandbox.

When I access /, I get the error about the Root Layout.

Can you check if the error stack trace is more precise on the latest canary (for the /repro path)?

This comment was marked as off-topic.

Sign in to view

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Rendering content (e.g. text) outside of an element directly underneath <body> causes a hydration error (when <body> is defined in page.tsx, not layout.tsx) #76815

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 6 comments 2 replies

This comment was marked as off-topic.

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Rendering content (e.g. text) outside of an element directly underneath <body> causes a hydration error (when <body> is defined in page.tsx, not layout.tsx) #76815

rik-iso Mar 1, 2025

Link to the code that reproduces this issue

To Reproduce

repro code

Current vs. Expected behavior

Provide environment information

Which area(s) are affected? (Select all that apply)

Which stage(s) are affected? (Select all that apply)

Additional context

Replies: 6 comments · 2 replies

This comment was marked as off-topic.

oreninjas Mar 2, 2025

rik-iso Mar 2, 2025 Author

oreninjas Mar 3, 2025

samcx Mar 4, 2025 Maintainer

rik-iso Mar 6, 2025 Author

rik-iso Mar 6, 2025 Author

samcx Mar 6, 2025 Maintainer

rik-iso
Mar 1, 2025

Replies: 6 comments 2 replies

oreninjas
Mar 2, 2025

rik-iso
Mar 2, 2025
Author

oreninjas
Mar 3, 2025

samcx
Mar 4, 2025
Maintainer

rik-iso
Mar 6, 2025
Author

rik-iso Mar 6, 2025
Author

samcx Mar 6, 2025
Maintainer