Next.js の App Router は、すごく自由度が高い反面、「こうしなきゃ！」という決まったルールがないため、プロジェクトごとに「最適な形」を見つけ出さなければならないところが魅力でもあり悩みの種でもあります。この記事では、実際に開発していて感じたこと、そして「こんな豆知識もあるよ！」という話をしてます！
参考になれば幸いです！
⸻
1. 基本の構成などない
まず最初に言いたいのは、Next.js の App Router には「これが基本！」という決まり文句はないということ。
• シンプルに始めよう
プロジェクトの最初は、app/page.tsx と app/layout.tsx だけで十分です。あとは、必要に応じて機能が増えるたびに、どんどんフォルダを細かく分けていくスタイルで大丈夫です。
• プロジェクトごとのアレンジ
規模や目的に合わせて、後から「こんな感じにしよう」とフォルダを整理していけばいいので、初めから完璧にしようとせず、柔軟に対応していくことが大切です。
⸻
2. レイアウトやコンポーネントの置き場所
グローバルと局所のレイアウト
• グローバルレイアウト
全ページ共通のデザインは、app/layout.tsx にまとめます。ここにヘッダー、フッター、共通ナビゲーションなんかを置けば、どのページも同じ雰囲気に仕上がります。
• 局所レイアウト
例えば、dashboard や about といった特定のセクションだけ、全体とは違うデザインにしたい場合、そのディレクトリ内に layout.tsx を置くことで、個別にレイアウトを設定できます。
豆知識：
複数の layout.tsx があるとき、Next.js は一番近い階層のレイアウトを優先するので、意図しない挙動にならないよう注意が必要です。共通パーツは別のコンポーネントに切り出して、components/ フォルダにまとめると整理しやすいですよ。
⸻
3. パスと命名に関するちょっとした裏技
() で囲むとパスに現れない
これ、結構知られていない豆知識なんですが、フォルダ名を丸括弧 () で囲むと、そのグループは URL パスに反映されなくなるんです。
• 例：
app/(marketing)/page.tsx とすると、実際の URL には「marketing」が表示されません。
→ この仕組みを使えば、内部の整理やグループ分けはしながらも、URL をシンプルに保つことができるんです。
角括弧 [ ] で動的ルート
動的ルートを作るときは、フォルダ名を角括弧 [ ] で囲みます。
• 例：
app/dashboard/users/[id]/page.tsx は、/dashboard/users/123 のような URL を自動生成してくれます。
→ これは非常に便利なので、ユーザーごとのページや商品詳細ページなどに活用できます。
その他の命名の注意点
• 予約済みのファイル名
page.tsx、layout.tsx、loading.tsx、error.tsx、not-found.tsx などは Next.js が特別扱いしているので、名前はそのまま使いましょう。
• アンダースコアで始まるフォルダ
一部の開発者はアンダースコアを使って内部用ファイルを区別することがありますが、App Router ではアンダースコアが付いていてもルーティングに含まれるので注意してください。
• 大文字・小文字
OS によっては大文字小文字が区別されるので、命名規則は一貫性を持たせるようにしましょう。
⸻
4. API ルートの整理と注意点
API ルートは、app/api/ 配下に整理します。
• 例：
app
└── api
├── auth
│ └── route.ts // /api/auth
└── posts
└── route.ts // /api/posts
豆知識：
API ルートは必ず route.ts というファイル名にする必要があります。また、HTTP メソッドごとにエクスポートされた関数（GET、POST など）で実装するので、実装方法は公式ドキュメントを参考にしてみてください。
階層が深くなりすぎると URL が冗長になりがちなので、必要に応じて整理することも大事です。
⸻
5. プロジェクト規模に合わせた柔軟な整理方法
• 最初はシンプルに
プロジェクト開始時はシンプルな構成から始め、機能が増えるに従って徐々にコンポーネントやユーティリティを components/ や lib/ などのフォルダに分けていくと良いでしょう。
• ドメインごとの分割
ビジネスロジックや機能ごとにフォルダを分ける「ドメイン駆動設計」を採用すると、チーム全体での理解や保守性が高まります。
例：app/dashboard/ や app/marketing/ など、機能別にディレクトリを作ると見通しが良くなります。
• ドキュメントの整備
チームで開発している場合、どのフォルダがルーティングに含まれるか、どのフォルダは内部整理用かを README や Wiki にまとめておくと、後から参加したメンバーにも親切です。
⸻
6. まとめ
Next.js App Router のフォルダ構成は、決まった正解がない分、自分たちの開発スタイルに合わせて自由に設計できるのが魅力です。
• () で囲むとパスに反映されない 仕組みは、内部整理と URL のシンプルさを両立できる強力なツールです。
• 角括弧 [ ] を使って動的ルートを実装し、予約済みファイル名や命名規則を守ることで、Next.js の仕組みを最大限に活用できます。
• プロジェクトが成長するにつれて、柔軟にフォルダ構成を見直し、チーム内でルールを共有することで、より効率的な開発環境を作り上げていくことができます。
こんな感じで、日々の開発の中で「こんな裏技もあったんだ！」と実感しながら、試行錯誤して自分たちにぴったりのフォルダ構成を見つけていってください。開発は決して一本道ではなく、柔軟性と工夫が成功へのカギです。