メインコンテンツまでスキップ

ルーティングの基本

アプリケーションの骨組みはルーティングです。このページでは、Webにおけるルーティングの基本概念と、Next.jsでのルーティングの扱い方を紹介します。

用語集

まず、このドキュメント全体で使用される用語を説明します。以下は参考にしてください。

コンポーネントツリーの用語集コンポーネントツリーの用語集
  • Tree: 階層構造を視覚化するための規約。たとえば、親子コンポーネントがあるコンポーネントツリーやフォルダー構造など
  • Subtree: 新しいroot(最初)から始まり、leaf(最後)で終わるtreeの一部
  • Root: root レイアウトのように、treeやsubtreeの最初のノード
  • Leaf: URLパスの最後のセグメントのように、子を持たないsbtreeのノード
URLの構造の用語集URLの構造の用語集
  • URL Segment: スラッシュで区切られたURLパスの一部
  • URL Path: ドメインの後に続くURLの一部(セグメントで構成される)

App Router

バージョン13で、Next.jsは、共有レイアウト、ネストされたルーティング、読み込み状態、エラー処理などをサポートする新しいApp Routerを導入しました。

App Routerはappという新しいディレクトリで動作します。appディレクトリはpagesディレクトリとともに段階的導入を可能にします。これは、アプリケーションの一部のルートを新しい動作に準拠させる一方で、他のルートを以前の動作のためにpagesディレクトリに置いておくことができるようにします。アプリケーションがpagesディレクトリを使用している場合は、Pages Routerドキュメントも参照してください。

Good to know: App RouterはPages Routerより優先されます。ディレクトリを跨いでルートが同じURLパスに解決されるべきではなく、衝突を避けるためにビルド時にエラーが発生します。

Next.js App DirectoryNext.js App Directory

デフォルトでは、app内のコンポーネントはReact Server Componentsです。これはパフォーマンスの最適化であり、簡単に採用できます。また、Client Componentsも使用できます。

Recommendation: Server Componentsに慣れていない場合は、Serverページを確認してください。

フォルダーとファイルの役割

Next.jsはファイルシステムに基づくルーターを使用しています。ここで:

  • フォルダーはルートを定義するために使用されます。ルートはrootフォルダーから最終的なleafフォルダーまでのファイルシステム階層に従ったネストフォルダーの単一パスです。詳しくはDefining Routesをご覧ください
  • ファイルはルートセグメントに表示されるUIを作成するために使用されます。詳しくは特別なファイルをご覧ください

ルートセグメント

ルート内の各フォルダーはルートセグメントを表します。各ルートセグメントは、対応するURLパス内のセグメントにマッピングされます。

ルートセグメントがURLセグメントにどのようにマッピングされるかルートセグメントがURLセグメントにどのようにマ�ッピングされるか

ネストされたルート

ネストされたルートを作成するには、フォルダーの中にフォルダーをネストできます。たとえば、appディレクトリに2つの新しいフォルダーをネストして、新しい/dashboard/settingsルートを追加できます。

/dashboard/settingsルートは、3つのセグメントで構成されています:

  • / (Rootセグメント)
  • dashboard (セグメント)
  • settings (Leafセグメント)

ファイルの規約

Next.jsは、特定の振る舞いを持つネストされたルートのUIを作成するための一連の特別なファイルを提供しています:

layoutセグメントとその子に対する共有UI
pageルートのユニークなUIを作成し、ルートを公開アクセス可能にします
loadingセグメントとその子に対する読み込みUI
not-foundセグメントとその子に対する見つからないUI
errorセグメントとその子に対するエラーUI
global-errorグローバルエラーUI
routeサーバーサイドのAPIエンドポイント
template専用に再レンダリングされたレイアウトUI
defaultParallel RoutesのフォールバックUI

Good to know: 特別なファイルには.js.jsx、または.tsxの拡張子が使用できます。

コンポーネント階層

ルートセグメントの特定のファイルで定義されたReactコンポーネントは、特定の階層でレンダリングされます:

  • layout.js
  • template.js
  • error.js(React error boundary)
  • loading.js(React suspense boundary)
  • not-found.js(React error boundary)
  • page.jsまたはネストされたlayout.js
ファイルの規約におけるコンポーネント階層ファイルの規約におけるコンポーネント階層

ネストされたルートにおいては、セグメントのコンポーネントは親セグメントのコンポーネントの内側にネストされます。

ネストされたファイルの規約のコンポーネント階層ネストされたファイルの規約のコンポーネント階層

コロケーション

特別なファイルに加えて、appディレクトリ内のフォルダーに独自のファイル(例:コンポーネント、スタイル、テストなど)を配置するオプションがあります。

これは、フォルダーがルートを定義している一方で、page.jsroute.jsが返す内容のみが公開されるためです。

コロケートされたファイルを持つフォルダ構造の例コロケートされたファイルを持つフォルダ構造の例

プロジェクトの組織とコロケーションについて詳しく学びましょう。

高度なルーティングパターン

App Routerは、より高度なルーティングパターンを実装するための一連の規約も提供しています。これには次のものが含まれます:

  • Parallel Routes: 同時に2つ以上のページを同じビューに表示し、独立してナビゲートできるようにします。独自のサブナビゲーションがある分割ビューに使用できます。例:ダッシュボード
  • Intercepting Routes: ルートをインターセプトし、他のルートのコンテキストで表示できるようにします。現在のページのコンテキストを保持することが重要な場合にこれを使用します。例:1つのタスクを編集しながらすべてのタスクを表示する、またはフィード内で写真を拡大表示する

これらのパターンを使用することで、小規模なチームや個々の開発者が実装するのが従来は複雑だった機能を民主化し、よりリッチで複雑なUIを構築できます。

次のステップ

Next.jsにおけるルーティングの基本を理解した今、以下のリンクをたどって、最初のルートを作成してみましょう: