layout.tsx と page.tsx は、それぞれ何をするファイルですか。
page.tsx はそのURLで表示される中身そのもので、これが無いとパスは公開されません。layout.tsx は配下で共有される枠で、ページを移動しても状態が保たれます。
面接官が見ているのは基本規約の補強。
これは「app ディレクトリの中にコンポーネントやテスト用のファイルを置いても、URL として公開されてしまいませんか。」への追撃質問です。
よくある答えと、面談でどう見られるか
- page はその URL の中身、layout は配下で共有される枠
layout は遷移しても再マウントされない点まで押さえられると強いです。 - page は中身、layout は共通の枠で、layout は遷移しても状態が保たれる
正確です。サイドバーの開閉が遷移で戻らないのはこのためです。毎回リセットしたい場合は template を使います。 - page は静的なページ、layout は動的なページ
静的・動的とは無関係です。役割の分担であって、レンダリング方式の話ではありません。 - layout は任意で、無くても動く
各階層では任意ですが、ルートレイアウトは必須です。html と body を出力する場所が要るためです。
面接官は何を見ているか
- page がその URL の中身だと言えた
- layout が複数ページで共有される枠だと言えた
- layout は遷移しても再マウントされないと知っている
模範解答
page.tsx はその URL で表示される中身そのものです。これが無いとそのパスは公開されません。
layout.tsx は、配下の複数ページで共有される枠です。ヘッダーやサイドバーのように、ページを移動しても変わらない部分を置きます。
重要な性質として、layout は配下のページ間を移動しても再マウントされず、状態を保ったままになります。サイドバーの開閉状態がページ遷移で戻らないのはこのためです。逆に、毎回リセットしたい場合は template.tsx を使います。