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

ルーティングの基本

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

用語​

まず、ドキュメント全体で使用されるこれらの用語を見てみましょう。ここに簡単な参考があります：

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

app Router​

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

App Routerはappという新しいディレクトリ内で動作します。appディレクトリはpagesディレクトリと共に動作して、段階的な導入を可能にします。これにより、アプリケーションの一部のルートを新しい動作に適応させる一方で、他のルートをpagesディレクトリに保持して従来の動作を維持できます。もしアプリケーションがpagesディレクトリを使用している場合は、Pages Routerドキュメントも参照してください。

Good to know: App RouterはPages Routerよりも優先されます。ディレクトリ全体を通じて同じURLパスに解決すべきではなく、競合を防ぐためにビルド時にエラーが発生します。

Next.js AppディレクトリNext.js Appディレクトリ

デフォルトでは、app内のコンポーネントはReact Server Componentsです。これはパフォーマンスを最適化し、簡単に導入することが可能です。また、Client Componentsも使用できます。

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

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

Next.jsはファイルシステムベースのルーターを使用します：

  • フォルダはルートを定義するために使用されます。ルートは、rootフォルダからpage.jsファイルを含む最終的なleafフォルダまでファイルシステム階層に従ったネストされたフォルダの単一パスです。ルートの定義を参照してください
  • ファイルはルートセグメントに表示される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セグメントとその子のためのNot Found UI
errorセグメントとその子のためのエラーUI
global-errorグローバルエラーUI
routeサーバーサイドのAPIエンドポイント
template専門的に再レンダリングされたLayout 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.jsまたはroute.jsによって返される内容のみが公開可能であるためです。

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

Project Organization and Colocationについて詳しく学びましょう。

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

App Routerは、より高度なルーティングパターンを実装するのを助けるための一連の規約を提供します。これには以下が含まれます：

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

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

次のステップ​

Next.jsでのルーティングの基本を理解したので、以下のリンクに従って最初のルートを作成してください：