Skip to main content
GoodFirstPicks
DashboardIssuesReposLeaderboard

GoodFirstPicks by Leaveitblank © 2026

CreatorRequest a RepoPrivacy PolicyTerms of Service
Next13.4 appDir does not render layout and template in the way the docs say it should | GoodFirstPicks

Next13.4 appDir does not render layout and template in the way the docs say it should

vercel/next.js 6 comments 1mo ago
View on GitHub
highopenScope: somewhat clearSkill match: noNext.jsTypeScriptReact

Why this is a good first issue

This issue involves core Next.js routing behavior and requires deep architectural understanding.

AI Summary

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.

Issue Description

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.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

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/wizardly-wing-fj1kod

To Reproduce

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: Screenshot 2023-05-10 at 12 21 48

Describe the Bug

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

GitHub Labels

Linking and Navigatinglinear: next

Want to work on this?

Claim this issue to let others know you're working on it. You'll earn 10 points when you complete it!

Risk Flags

  • requires deep Next.js architecture knowledge
  • potential breaking changes
Loading labels...

Details

Points10 pts
Difficultyhigh
Scopesomewhat clear
Skill Matchno
Test Focusedno