速習App Router#4 ネストされたlayout.tsx

はじめに

この記事は下記の講座で学んだ内容をまとめています。
理解が怪しい所があるので教えてくれるととても嬉しいです。

目次

1.速習App Router#1
2.速習App Router#2
3.速習App Router#3
4.速習App Router#4 <- この記事
5.速習App Router#5
6.速習App Router#6
7.速習App Router#7

ネストされたlayout.tsxの挙動を理解する

このようなlayout.tsxがネストされているファイル構造を想定します。

app/nested-layout
├── page.tsx
    layout.tsx
    second
     └─ page.tsx
        layout.tsx
        third
         └─ page.tsx
             layout.tsx
             fourth
              └─ page.tsx

・http://localhost:3000/nested-layout -> app/layout.tsx +
app/nested-layout/layout.tsx + app/nested-layout/page.tsx が描画

・http://localhost:3000/nested-layout/second -> app/layout.tsx +
app/nested-layout/layout.tsx + app/nested-layout/second/layout.tsx +
app/nested-layout/second/page.tsx が描画

・http://localhost:3000/nested-layout/second/third -> app/layout.tsx +
app/nested-layout/layout.tsx + app/nested-layout/second/layout.tsx +
app/nested-layout/second/third/layout.tsx + app/nested-layout/second/third/page.tsx が描画

・http://localhost:3000/nested-layout/second/third/fourth -> app/layout.tsx +
app/nested-layout/layout.tsx + app/nested-layout/second/layout.tsx +
app/nested-layout/second/third/layout.tsx +
app/nested-layout/second/third/fourth/page.tsxが描画

ここから アクセスされたURLに対応するフォルダ内のpage.tsxをapp/layout.tsxまで
上にlayout.tsxでラップしながら描画内容が作成されるという事が分かる