Next13: unwanted div element added inside layout

Verify canary release

• 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 22.1.0: Sun Oct  9 20:14:30 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T8103
Binaries:
  Node: 16.17.1
  npm: 8.15.0
  Yarn: 1.22.19
  pnpm: N/A
Relevant packages:
  next: 13.0.0
  eslint-config-next: 13.0.0
  react: 18.2.0
  react-dom: 18.2.0

warn - Latest canary version not detected, detected: “13.0.0”, newest: “13.0.2-canary.0”. Please try the latest canary version (npm install next@canary) to confirm the issue still exists before creating a new issue. Read more - https://nextjs.org/docs/messages/opening-an-issue

What browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

No response

Describe the Bug

I can confirm that for every nested layout that I’ve used, there is a parent div which children is wrapped inside them. I’ve checked my code I don’t return that <div> so I suspect is wrapping children around another div.

Expected Behavior

I expect it to be wrapped inside Fragment(if necessary) because, <div> messes my styles

Link to reproduction

yarn create next-app nextjs-server-components --experimental-app

To Reproduce

Check the default Next.js rendered HTML for path /, there is a <div> around page container which is neither present inside the default layout nor inside the page

[long-lazuli]

Hi, While waiting for a proper solution, I wanted to mention that this simple CSS resolve a lot of my issues with these unwanted div.

[data-nextjs-scroll-focus-boundary] {
  display: contents;
}

it will not work for older browsers unfortunately.

[danieljpgo]

It was fixed in the last canary

https://github.com/vercel/next.js/pull/43717