ネストしたルート

深い URL は、深いフォルダ

/mypage の下に「出品した商品」の画面を足したいとします。URL は /mypage/listings です。

フォルダ = URL の決まりは、深くなっても同じです。フォルダの中にフォルダを作るだけです。

app/mypage/ は page.tsx を持ちながら、同時に listings/ という子フォルダを持てます。親がページであることと、子のページを抱えることは、まったくぶつかりません。

親のページは、子のページを囲まない

ここで勘違いしやすい点があります。/mypage/listings を開いたとき、app/mypage/page.tsx の中身は表示されません。表示されるのは app/mypage/listings/page.tsx だけです。

URL が入れ子でも、page.tsx は入れ子になりません。1つの URL に対して表示される page.tsx は必ず1枚です。

では「マイページの共通のサイドバーを、その下の全画面に出したい」ときはどうするか。それが layout.tsx の仕事で、次の章で扱います。いまは app/layout.tsx だけがヘッダーを出しています。

import の階層に注意する

フォルダが深くなると、data/ までの距離も伸びます。app/mypage/listings/page.tsx から見ると3つ上なので ../../../data/items です。1つ数え間違えると読み込めません。

演習

/mypage/listings を作ります。