App Router のディレクトリ構成の決め方

迷うのは「ページ以外をどこに置くか」

パスの決まり方はApp Router とは何かで見たとおり単純です。フォルダが URL、page が中身。迷うのはその先、ページではないものをどこへ置くかです。

App Router の答えは、使う場所の隣に置いてよいです。

app/
  about/
    page.tsx        →  /about になる
    Button.tsx      →  ならない。ただの部品
    schema.ts       →  ならない。ただの型

実機で確かめました。この形でビルドすると、出来るルートは / と /about だけです。Button.tsx も schema.ts も URL になりません。

完全に外したいときは、アンダースコア

隣に置くだけでは足りないこともあります。フォルダごとルーティングから外したいときは、名前をアンダースコアで始めます。

app/
  _lib/
    util.ts
    page.tsx        →  /_lib は出来ない

実機で確かめました。_lib の中に page.tsx を置いても、ルートは1つも増えません。ビルドの出力にも現れず、成果物を検索しても中身は1件も見つかりませんでした。

src を使うか、使わないか

app の置き場は2通りあります。どちらでも動きます。好みの問題です。

問題は両方ある状態です。移行の途中で手が止まると、こうなります。

app/
  page.tsx              ← こちらが使われる
src/app/
  page.tsx              ← 無視される
  inside/page.tsx       ← このページは存在しなくなる

実機で確かめました。ルート直下の app だけが使われ、src/app は丸ごと無視されます。エラーも警告も1つも出ません。

括弧とアンダースコアは、役割が違う

名前に付ける記号は2つあり、よく混同されます。

(marketing)/about/page.tsx は /about になります。括弧はパスから消えるだけで、中身は生きています。まとめて共通の layout.tsx を掛けたいときに使います。

_lib/page.tsx は何にもなりません。アンダースコアは中身ごと外します。

app/(marketing)/about/page.tsx
app/(marketing)/layout.tsx

app/_lib/db.ts
app/_components/Button.tsx

実際に動いているものを見る

このサイトの最小構成は、説明用に書き直したコードではなく、そのページをいま動かしている本物のファイルを出しています。フォルダがどう並ぶかは、実物のほうが早いです。

• 一覧と詳細の最小構成 — フォルダが URL になるところ
• 404 とエラーの最小構成 — not-found.tsx error.tsx の置き場所

決め方のまとめ

1. そのページでしか使わないものは、ページの隣に置く
2. 2つ目から使われた時点で、共通の置き場へ移す
3. ルートにしたくないものは、アンダースコアで始まるフォルダへ
4. まとめたいだけなら、括弧で囲む
5. src は使っても使わなくてもよい。両方あるのだけは避ける

「正解の構成」を最初に決め切ろうとしないでください。2つ目に使われたときに動かす、という規則さえ守れば、構成は自然に落ち着きます。