IT-Q

loading.tsx を置いたら、そのフォルダ配下の全ページに効いてしまいました。特定のページだけにしたい場合は。

ルートグループを使います。括弧で囲んだフォルダを作り、対象の page.tsx と loading.tsx をその中へ移します。括弧付きのフォルダ名はURLに現れないため、パスは変わりません。

面接官が見ているのはルートグループを知っているか。ファイル規約の実務的な使い方。

これは「ページ遷移した直後に画面が真っ白になる時間があります。どう改善しますか。」への追撃質問です。

よくある答えと、面談でどう見られるか

  • ルートグループ(括弧付きフォルダ)を作り、その中に page と loading を移す
    URL を変えずに適用範囲だけ区切れます。公式もこの用途を挙げています。
  • loading.tsx の中で現在のパスを見て、対象外なら何も返さない
    動くかもしれませんが、仕組みに逆らっています。ファイル規約は配置で範囲を決めるものなので、配置で解くのが素直です。
  • loading.tsx をやめて、対象ページだけ Suspense を自分で書く
    これも正解です。むしろ細かく制御したいならこちらが向きます。ルートグループとの使い分けを説明できると強いです。
  • 対象ページを別のディレクトリに移して URL を変える
    URL を変えるのは影響が大きすぎます。まさにそれを避けるための仕組みがルートグループです。

面接官は何を見ているか

  • ルートグループ(括弧付きフォルダ)を挙げた
  • URL が変わらないと理解している
  • loading をその中に移す、と手順を言えた

模範解答

ルートグループを使います。括弧で囲んだフォルダ、たとえば (overview) を作り、その中に対象の page.tsx と loading.tsx を移します。

括弧付きのフォルダ名は URL に現れません。つまりパス構造を変えずに、ファイル規約の適用範囲だけを区切れます。公式もこの用途を例として挙げています。

同じ仕組みで、セクションごとにまったく違うレイアウトを当てることもできます。その場合はトップの layout.tsx を外して、各ルートグループに layout.tsx を置きます。ただしルートレイアウトが複数になるので、html と body のタグはそれぞれに書く必要があります。