ルーティングの基礎
すべてのアプリケーションの骨格はルーティングです。このページでは、Webルーティングの基本概念とNext.jsでのルーティングの処理方法について説明します。
用語
まず、ドキュメント全体でこれらの用語が使用されています。以下に簡単なリファレンスを示します。
- ツリー: 階層構造を視覚化するための規則。たとえば、親子コンポーネントを持つコンポーネントツリー、フォルダ構造などです。
- サブツリー: ツリーの一部で、新しいルート（最初）から始まり、リーフ（最後）で終わります。
- ルート: ツリーまたはサブツリーの最初のノード。ルートレイアウトなどです。
- リーフ: 子を持たないサブツリー内のノード。URLパスの最後のセグメントなどです。
- URLセグメント: スラッシュで区切られたURLパスの一部。
- URLパス: ドメインの後に来るURLの一部（セグメントで構成されます）。
app Router
バージョン13では、Next.jsはReactサーバーコンポーネント上に構築された新しいApp Routerを導入しました。これは、共有レイアウト、ネストされたルーティング、読み込み状態、エラー処理などをサポートします。
App Routerは、appという名前の新しいディレクトリで動作します。 appディレクトリはpagesディレクトリと並行して動作し、段階的な導入を可能にします。これにより、アプリケーションの一部のルートを新しい動作にオプトインしながら、他のルートをpagesディレクトリに残して以前の動作を維持できます。アプリケーションでpagesディレクトリを使用している場合は、Pages Routerのドキュメントも参照してください。
知っておくと良いこと: App RouterはPages Routerよりも優先されます。ディレクトリをまたがるルートは同じURLパスに解決されるべきではなく、競合を防ぐためにビルド時にエラーが発生します。
デフォルトでは、app内のコンポーネントはReactサーバーコンポーネントです。これはパフォーマンスの最適化であり、簡単に導入できます。また、クライアントコンポーネントも使用できます。
推奨: サーバーコンポーネントに慣れていない場合は、サーバーページをご覧ください。
フォルダとファイルの役割を参照してください。
ルートセグメント
（リンク部分は日本語に訳さず原文のままとします。必要であればDeepL等で訳してください。）
これは役に立ちましたか？