ルーティングの基礎

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

用語

まず、ドキュメント全体で使用されている以下の用語を理解しておきましょう。

• ツリー: 階層構造を視覚化するための規約。例えば、親コンポーネントと子コンポーネントから成るコンポーネントツリーやフォルダ構造などがあります。
• サブツリー: ツリーの一部で、新しいルート（最初）から葉（最後）までの部分です。
• ルート: ツリーまたはサブツリーの最初のノード、例えばルートレイアウトです。
• 葉: 子のないサブツリー内のノード、例えばURLパスの最後の Segmentです。

• URL Segment: スラッシュによって区切られたURLパスの一部。
• URL パス: ドメイン名の後に来るURLの一部（Segment で構成）。

app Router

バージョン 13 から Next.js は新しい App Router を導入しました。これは React Server Components をもとにして、共有レイアウト、入れ子になったルーティング、ローディング状態、エラーハンドリングなどをサポートしています。

App Router は新たに作成された app ディレクトリで動作します。app ディレクトリは pages ディレクトリと並行して動作し、漸進的に導入できるようになっています。これにより、アプリケーションの一部のルートを新しい App Router に組み込むことができ、他のルートは pages ディレクトリのまま従来の挙動を維持できます。pages ディレクトリを使っている場合は、Pages Router のドキュメンテーションもあわせて参照してください。

Good to know: App Router はPages Router よりも優先されます。ディレクトリ間のルートは同じURLパスに解決されないよう、衝突を防ぐためにビルド時にエラーを発生させます。

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

Recommendation: Server Components が初めての場合は、Server Components のページを参照してください。

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

Next.js はファイルシステムベースの Router を採用しています:

• フォルダ はルートを定義するために使用されます。ルートは、最初の ルートフォルダ から最終的な 葉フォルダ に至る、ネストされたフォルダの単一のパスで、page.js ファイルが含まれている必要があります。詳細はルートの定義 を参照してください。
• ファイル は、ルート Segment に対する UI を作成するために使用されます。詳細はファイル規約 を参照してください。

ルート Segment

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

ネストされたルート

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

/dashboard/settingsルートは3つのSegmentで構成されています:

• /（ルート Segment）
• dashboard（Segment）
• settings（葉 Segment）

ファイル規約

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

layout	Segment とその子コンポーネントで共有する UI
page	ルートのユニークな UI を作成し、ルートを公開する
loading	Segment とその子コンポーネントのローディング UI
not-found	Segment とその子コンポーネントが無かった場合の UI
error	Segment とその子コンポーネントのエラー UI
global-error	グローバルなエラー UI
route	サーバーサイドの API エンドポイント
template	再レンダリングされる特殊なレイアウト UI
default	Parallel Routes のフォールバック UI

Good to know: .js、.jsx、または ..tsx の拡張子が使用可能です。

コンポーネントの階層

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

• layout.js
• template.js
• error.js (React エラーバウンダリー)
• loading.js (React サスペンスバウンダリー)
• not-found.js (React エラーバウンダリー)
• page.js またはネストされた layout.js

ネストされたルートでは、Segmentのコンポーネントは親Segmentのコンポーネントの内部にネストされます。

コロケーション

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

これは、フォルダがルートを定義する一方で、page.js や route.js によって返される内容だけが公開されアクセスできるからです。

詳細はプロジェクト編成とファイル・コロケーションを参照してください。

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

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

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

これらのパターンを使用すると、小さなチームや個別の開発者では実装するのが難しかった機能を民主化し、リッチで複雑な UI を構築できます。

次のステップ

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

• ルートの定義 Next.js ではじめてルートを作成する方法を学びます。
• ページとレイアウト App Router ではじめてページと共有レイアウトを作成します。
• リンクとナビゲート Next.js でナビゲーションがどのように機能するのか、Link コンポーネントと useRouter フックの使い方を学びます。
• ロードUIとストリーミング Susppense の上に構築されたローディング UI は、特定のルート Segment 用のフォールバックを作成し、準備が整ったコンテンツを自動的にストリームできます。
• Error Handling ルート Segment とそのネストした子要素を React Error Boundary で自動的にラップすることで、ランタイムエラーを処理します。
• Redirecting Next.js でリダイレクトを処理するさまざまな方法を学びましょう。
• ルートグループ Route グループは、Next.js アプリケーションをさまざまなセクションへ分割するために使用できます。
• プロジェクト編成 Next.js プロジェクトを整理し、ファイルを配置する方法を学びます。
• Dynamic Routes Dynamic Routesは、動的なデータからルート Segment をプログラムで生成するために使用できる。
• Parallel Routes 独立してナビゲートできる 1 つまたは複数のページを、同じビューで同時にレンダリングする、非常に動的なアプリケーション向けのパターンです。
• Intercepting Routes Intercepting Routes を使って、ブラウザの URL をマスキングしながら、現在のレイアウト内で新しいルートを読み込みます。
• Route Handlers Web の Request API とResponse API を使用して、指定されたルートのカスタムリクエストハンドラを作成します。
• Middleware リクエストが完了する前にコードを実行する Middleware の使い方を学日ます。
• 国際化 国際化されたルーティングとローカライズされたコンテンツにより、多言語のサポートを追加します。