This issue involves core Next.js routing behavior and requires deep architectural understanding.
The issue describes a discrepancy between Next.js documentation and actual behavior regarding the rendering of layouts and templates in the app directory. The problem involves internal components like `OuterLayoutRouter` interfering with the expected structure. This requires deep architectural knowledge and potential changes to core routing logic.
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 22.4.0: Mon Mar 6 20:59:58 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T6020
Binaries:
Node: 18.16.0
npm: 9.5.1
Yarn: 1.22.19
pnpm: N/A
Relevant packages:
next: 13.4.2-canary.4
eslint-config-next: 13.4.1
react: 18.2.0
react-dom: 18.2.0
typescript: 5.0.4
App directory (appDir: true), Routing (next/router, next/navigation, next/link)
https://codesandbox.io/p/sandbox/wizardly-wing-fj1kod
Download and run the files in the sandbox (so that you can attach the React Developer Tools)
Note that in the react developer tools, the following component tree is rendered, showing the top Suspense added by the layout.tsx, two Next internal components, and then the Suspense from the template.tsx:
The NextJS Documentation on templates in the app-directory router here says that layouts and templates will be rendered as such:
<Layout>
{/* Note that the template is given a unique key. */}
<Template key={routeParam}>{children}</Template>
</Layout>
However, in practice we can clearly see that NextJS inserts a component called OuterLayoutRouter between each layout-template pair, separating the layout from the part of the Template framework that receives the unique key promised by the docs.
This means that components that rely on
Claim this issue to let others know you're working on it. You'll earn 10 points when you complete it!