ルーティングの基礎
すべてのアプリケーションの骨格はルーティングです。このページでは、Webアプリケーションにおけるルーティングの基本的な概念と、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 | セグメントとその子のための404 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のルーティングの基礎を理解したら、以下のリンクに従って最初のルートを作成してください: