ルーティングの基礎
すべてのアプリケーションの骨格はルーティングです。このページでは、ウェブアプリケーションにおけるルーティングの基本的な概念と、Next.jsでのルーティングの扱い方を紹介します。
用語集
まず、ドキュメント全体で使用される以下の用語を簡単に参照できます:
- ツリー: 階層構造を視覚化するための慣例。例えば、親子コンポーネントを持つコンポーネントツリーやフォルダ構造など。
- サブツリー: ツリーの一部で、新しいルート（最初）からリーフ（最後）までを指します。
- ルート: ツリーまたはサブツリーの最初のノード。例えばルートレイアウト。
- リーフ: 子を持たないサブツリー内のノード。URLパスの最後のセグメントなど。
- URLセグメント: スラッシュで区切られたURLパスの一部。
- URLパス: ドメインの後に続くURLの部分（セグメントで構成）。
app ルーター
バージョン13で、Next.jsはReactサーバーコンポーネント上に構築された新しいApp Routerを導入しました。これにより、共有レイアウト、ネストされたルーティング、ローディング状態、エラー処理などがサポートされます。
App Routerはappという新しいディレクトリで動作します。appディレクトリはpagesディレクトリと並行して動作し、段階的な導入が可能です。これにより、アプリケーションの一部のルートを新しい動作にオプトインしながら、他のルートはpagesディレクトリで従来の動作を維持できます。アプリケーションがpagesディレクトリを使用している場合は、Pages Routerのドキュメントも参照してください。
知っておくと良いこと: App RouterはPages Routerよりも優先されます。ディレクトリ間で同じURLパスに解決されるルートは、競合を防ぐためにビルド時エラーが発生します。
デフォルトでは、app内のコンポーネントはReactサーバーコンポーネントです。これはパフォーマンス最適化であり、簡単に採用できます。また、クライアントコンポーネントも使用できます。
推奨事項: サーバーコンポーネントが初めての場合は、サーバーページを確認してください。
フォルダとファイルの役割
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 | セグメントとその子のための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サスペンス境界)not-found.js(Reactエラー境界)page.jsまたはネストされたlayout.js
ネストされたルートでは、セグメントのコンポーネントはその親セグメントのコンポーネントの内側にネストされます。
同配置
特殊ファイルに加えて、appディレクトリ内のフォルダに独自のファイル（コンポーネント、スタイル、テストなど）を同配置するオプションがあります。
これは、フォルダがルートを定義する一方で、page.jsまたはroute.jsによって返される内容のみが公開的にアクセス可能だからです。
プロジェクト組織と同配置について詳しく学びます。
高度なルーティングパターン
App Routerは、より高度なルーティングパターンを実装するための一連の規約も提供します。これらには以下が含まれます:
- 並列ルート: 同じビューで独立してナビゲート可能な2つ以上のページを同時に表示できます。独自のサブナビゲーションを持つ分割ビューに使用できます。例: ダッシュボード。
- インターセプトルート: ルートをインターセプトし、別のルートのコンテキストで表示できます。現在のページのコンテキストを維持することが重要な場合に使用します。例: タスクを編集しながらすべてのタスクを表示する、またはフィード内の写真を拡大表示する。
これらのパターンにより、よりリッチで複雑なUIを構築でき、これまで小規模なチームや個人開発者にとって複雑だった機能を民主化します。
次のステップ
Next.jsでのルーティングの基礎を理解したら、以下のリンクをフォローして最初のルートを作成してください: