layout.tsx

App Router の app ディレクトリ内に配置する特別なファイルの 1 つ

別に .jsx（.js）でも良い radish-miyazaki.icon

特定の URL Segment に layout.tsx を配置すると、その URL Segment 配下のすべての URL Segment に対して適用される共通の UI

Root Layout の場合、すべての Segment に対して適用される

e.g.

code:text

app/nested-layout/

├── layout.tsx

├── page.tsx

└── second

├── layout.tsx

├── page.tsx

└── third

├── fourth

│ └── page.tsx

├── layout.tsx

└── page.tsx

/second にアクセスすると、second までの全 layout.tsx + second/page.tsx が表示される

second/third/fourth にアクセスすると、third までの全 layout.tsx + fourth/page.tsx が表示される

template.tsx とは異なりページ遷移間で状態を保持し、再レンダリングされない