Component in layout renders below children, when placed above.

Open kasperaamodt opened this issue 3 years ago • 0 comments

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:19:52 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T6000 Binaries: Node: 16.17.0 npm: 8.15.0 Yarn: 1.22.18 pnpm: 7.6.0 Relevant packages: next: 13.0.1-canary.0 eslint-config-next: 13.0.0 react: 18.2.0 react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

In my root layout, I have a <Header /> component placed before <body>{children}</body>. In all routes, the header renders after the closing body tag, causing a hydration error.

Expected Behavior

I expect the header to render above the body, where I am placing it.

Link to reproduction

https://codesandbox.io/s/currying-morning-v0mbio?file=/app/layout.tsx

To Reproduce

Run the codesandbox

Oct 29 '22 17:10 kasperaamodt