ルーティングの基本
あらゆるアプリケーションの骨格はルーティングです。このページでは、Webのルーティングに関する基本的な概念とNext.jsでのルーティングの扱い方を紹介します。
用語
まず、ドキュメント全体で使用される用語について説明します。以下は簡単な参考資料です：
- ツリー： 階層構造を視覚化するための規則。例えば、親子関係のあるコンポーネントツリー、フォルダ構造などが該当します。
- サブツリー： ツリーの一部で、新しいルート（最初）から末端（最後）までを指します。
- ルート： ツリーまたはサブツリーの最初のノード。ルートレイアウトなどがこれに当たります。
- リーフ： サブツリー内の子を持たないノード。例えば、URLパスの最後のセグメントなどです。
- URLセグメント： スラッシュで区切られたURLパスの一部。
- URLパス： ドメインの後に続くURLの部分（セグメントで構成される）。
appルーター
バージョン13で、Next.jsはReact Server Components上に構築された新しいAppルーターを導入しました。これは共有レイアウト、ネストされたルーティング、読み込み状態、エラーハンドリングなどをサポートします。
Appルーターは、appという名前の新しいディレクトリで動作します。appディレクトリはpagesディレクトリと並存し、段階的な採用を可能にします。これにより、アプリケーションの一部のルートを新しい動作に移行しながら、他のルートはpagesディレクトリで従来の挙動を維持できます。アプリケーションでpagesディレクトリを使用している場合は、Pages Routerのドキュメントも参照してください。
補足： AppルーターはPagesルーターよりも優先されます。異なるディレクトリ間のルートは同じURLパスに解決されず、競合を防ぐためビルド時にエラーが発生します。
デフォルトでは、app内のコンポーネントはReact Server Componentsです。これはパフォーマンス最適化であり、簡単に採用できます。また、クライアントコンポーネントも使用できます。
推奨： Server Componentsを初めて使用する場合は、サーバーコンポーネントのページをご確認ください。
フォルダとファイルの役割
Next.jsはファイルシステムベースのルーターを使用します：
- フォルダ： ルートを定義するために使用されます。ルートは、ルートフォルダから
page.jsファイルを含む最終的なリーフフォルダまでのネストされたフォルダの単一のパスです。ルートの定義を参照してください。 - ファイル： ルートセグメントのUIを作成するために使用されます。特殊ファイルを参照してください。
ルートセグメント
ルート内の各フォルダはルートセグメントを表します。各ルートセグメントは、URLパスの対応するセグメントにマッピングされます。
ネストされたルート
ネストされたルートを作成するには、フォルダを互いにネストします。例えば、appディレクトリ内に2つの新しいフォルダをネストすることで、新しい /dashboard/settings ルートを追加できます。
/dashboard/settingsルートは3つのセグメントで構成されます：
/（ルートセグメント）dashboard（セグメント）settings（リーフセグメント）
ファイルの規則
Next.jsは、ネストされたルート内で特定の動作を持つUIを作成するための特殊なファイルセットを提供します：
layout | セグメントとその子のための共有UI |
page | ルートの固有のUIと、ルートを公開アクセス可能にする |
loading | セグメントとその子のための読み込みUI |
not-found | セグメントとその子のための見つからないUI |
error | セグメントとその子のためのエラーUI |
global-error | グローバルエラーUI |
route | サーバーサイドAPIエンドポイント |
template | 特殊な再レンダリングされるレイアウトUI |
default | 並列ルートのフォールバックUI |
補足： 特殊ファイルには
.js、.jsx、または.tsxの拡張子を使用できます。
コンポーネント階層
ルートセグメントの特殊ファイルで定義されたReactコンポーネントは、特定の階層でレンダリングされます：
layout.jstemplate.jserror.js（Reactエラーバウンダリ）loading.js（React Suspenseバウンダリ）not-found.js（Reactエラーバウンダリ）page.jsまたは入れ子のlayout.js
ネストされたルートでは、セグメントのコンポーネントは、親セグメントのコンポーネントの内部にネストされます。
コロケーション
特殊ファイルに加えて、appディレクトリ内のフォルダに独自のファイル（コンポーネント、スタイル、テストなど）を配置するオプションがあります。
これは、フォルダがルートを定義する一方で、page.jsまたはroute.jsが返すコンテンツのみが公開アドレス可能であるためです。
プロジェクト構成とコロケーションの詳細をご覧ください。
高度なルーティングパターン
Appルーターは、より高度なルーティングパターンを実装するのに役立つ一連の規則も提供します：
- パラレルルート：同じビュー内で2つ以上のページを同時に表示でき、それぞれ独立してナビゲーションできます。独自のサブナビゲーションを持つ分割ビューに使用できます。例：ダッシュボード。
- インターセプティングルート：あるルートを傍受し、別のルートのコンテキスト内で表示できます。現在のページのコンテキストを維持することが重要な場合に使用できます。例：タスクを編集しながらすべてのタスクを表示する、またはフィード内の写真を拡大する。
これらのパターンにより、より豊かで複雑なUIを構築でき、小規模なチームや個々の開発者が実装するのが歴史的に難しかった機能を民主化できます。
次のステップ
Next.jsのルーティングの基本を理解したので、以下のリンクをたどって最初のルートを作成しましょう：