Next.js ベストプラクティス（ルーティング編）

Next.jsがバージョン15になるっとことでNext.jsについて勉強しようと思い書きました。ご参考にというのと私はこういうディレクトリー構成ですって人は是非教えてください🙇‍♂️

そもそもルーティングってなに？

ルーティングはプロジェクトの骨格部分であり、遷移先のURLを決定します。
例えば、https://localhost:3000/user というURLから、userに関するページであることが分かります。このURLの user 部分がルーティングの設計やプロジェクトの構成を決める要素となります。

階層構造の基本

木のイメージを持つと理解しやすいです！
tree ---- sub tree --- sub tree --- leaf

混乱しやすい単語

• Root：ツリーやその根本となるフォルダ
• Root Segment：各サブツリーのフォルダ
  

App Router のルーティング

app/ 配下にフォルダやファイルを配置していきます。例えば：

• /app/page.tsx → https://xxx.com
• /app/dashboard/page.tsx → https://xxx.com/dashboard
• /app/dashboard/settings/page.tsx → https://xxx.com/dashboard/settings

動的ルーティング

• /app/dashboard/[id]/page.tsx
  • id=1 → https://xxx.com/dashboard/1
  • id=2 → https://xxx.com/dashboard/2

このように動的にルーティングを設定できます。ディレクトリ内の page.tsx が該当するHTMLファイルとして読み込まれます。

特殊な役割を持つファイル名

• page → ルーティングとして認識
• layout → ページ共通のレイアウト作成
• loading → ストリーミングやローディングUI
• not-found → 404ページの作成
• error/global-error → エラーページの表示
• route → APIルーティングとして認識
• template → 共通レイアウト作成（layoutとは異なり遷移時に再レンダリング、アニメーション遷移に便利）
• default → パラレルルートで使用
  

これらのファイルは自動的に同じ階層の page.tsx にレンダリングされます。

コロケーション機能

コロケーション機能は、関連するファイルを近くに配置することを指します。page.tsx を宣言しないと、ルーティングとして認識されません。
例：

• /app/dashboard/footer.tsx
• /app/dashboard/header.tsx
• /app/dashboard/util.ts

コロケーションのメリット

ファイルを近い位置に管理でき、保守がしやすくなります。（チームごとに使い方が異なることがあります）

プロジェクト整理機能

プライベートフォルダ

プライベートフォルダは、ルーティングから除外されるフォルダで、名前の先頭に _ を付けます。

• /app/dashboard/_components/button.tsx → ルーティングされません

プライベートフォルダのメリット

• ルーティングロジックから除外可能
• 見た目で判別しやすい
• エディター上でグループ化や並び替えが容易

ルートグループ

ルートグループは、プロジェクトをグループ化する機能です。フォルダ名を括弧 () で囲みます。

• /app/(dashboard)/settings/page.tsx → https://xxx.com/setting

ルートグループのメリット

• ルーティングの役割を認識しやすく、共有も簡単
• 特定のセグメントを layout.tsx に組み込める
  

最後にベストプラクティス

ルーティング設計のベストプラクティス

3つの戦略があります：

1. /app の外部にプロジェクトファイルを設置
   • /app はルーティング専用にし、他のファイルは外に配置
   • 個人的にはこれが最も良いと思います。
2. /app 内のトップフォルダにプロジェクトファイルを配置
   • 内部に全てのファイルを配置（あまり使わないかも）
3. 機能やルートごとにプロジェクトファイルを配置
   • /app 内でコロケーション機能を活用して配置

プロジェクトやチームの方針によって異なります。

プロジェクト配置設計のベストプラクティス

Atomic Design

• 化学をアナロジーとした設計手法

メリット

• 再利用性、一貫性、拡張性が向上

デメリット

• コンポーネント基準が曖昧になる
• UIの変更箇所を見つけづらい
• 細かく分割しすぎると混乱を招く可能性がある

Bulletproof-React

最後に結局のところドキュメントを見るのが一番いいのでみんなも一緒に勉強しましょ！！