Routing Fundamentals
すべてのアプリケーションの骨組みはルーティングです。このページでは、web のルーティングについての基本的な概念と、Next.js でのルーティングの取り扱い方を紹介します。
Terminology
まず、これらの用語がドキュメンテーション全体で使用されているのを見てみます。ここに簡単な参考を紹介します:
- Tree: 階層構造を視覚化するための慣習。例えば、親と children コンポーネントを持つ component ツリー、フォルダ構造など。
- Subtree: Tree の一部で、新しい root (最初)から始まり、Leaf (最後)で終わる。
- Root: Tree または Subtree の最初のノードで、たとえば root layout のようなもの。
- Leaf: URL path の最終セグメントのように、部分木内で子がないノード。
- URL セグメント: スラッシュで区切られた URL path の一部。
- URL Path : ドメインの後に続く URL の一部(セグメントで構成)。
The app
Router
version 13 で、 Next.js は新しい App Router を導入しました。これは React Server Components を基盤としており、共有レイアウト、ネスト化されたルーティング、 loading の状態、 error の処理などをサポートしています。
App Router は app
という新しいディレクトリで動作します。app
ディレクトリは pages
ディレクトリと並行して動作し、段階的な採用を可能にします。これにより、アプリケーションの一部の routes を新しい動作に適応させることができ、他の routes は以前の動作のために pages
ディレクトリに保持することができます。もしアプリケーションが pages
ディレクトリを使用している場合は、Pages Router のドキュメントもご覧ください。
Good to know: App Router は Pages Router よりも優先されます。ディレクトリ間の Routes は同じ URL path にするべきではなく、競合を防ぐために build 時に error が発生します。
default で、app
内の Component は React Server Components です。これはパフォーマンスの最適化であり、簡単に採用できます。また Client Components も使用できます。
おすすめ: Server Components に慣れていない場合は、Server ページをご覧ください。
Roles of Folders and Files
Next.js は、ファイルシステムベースの router を使用します。具体的には、
- フォルダーは Routes を定義するために使用されます。 route は、root フォルダーから最終的なleaf folderまでのファイルシステムの階層に従った一連の path で、
page.js
ファイルを含みます。routes の定義を参照してください。 - ファイルは、 route セグメントに表示される UI を作成するために使用されます。特別なファイルを参照してください。
Route Segments
route 内の各フォルダは route segment を表します。 各 route segment はセグメントとして URL path に対応してマッピングされます。
Nested Routes
ネストされた route を作成するには、フォルダを互いにネストさせることができます。例えば、新しい/dashboard/settings
の route を追加するためには、app
ディレクトリに 2 つの新しいフォルダをネストさせることができます。
/dashboard/settings
route は 3 つのセグメントで構成されています:
/
(Root セグメント)dashboard
(セグメント)settings
(リーフセグメント)
File Conventions
Next.js は、ネストされた routes 内で特定の動作を持つ UI を作成するための特別なファイルセットを提供します:
layout | セグメントとその children の共有 UI |
page | ユニークな UI を持つ route を作り、 routes を公開アクセス可能にします |
loading | セグメントおよびその children のロード中 UI |
not-found | セグメントとその children の UI が見つかりませんでした |
error | セグメントとその children に対しての Error UI |
global-error | グローバル Error UI |
route | Server-side API エンドポイント |
template | 特別に再レンダリングされた Layout UI |
default | Parallel Routesの Fallback UI |
Good to know:
.js
,.jsx
, または.tsx
の拡張子が特別なファイルに使用できます。
Component Hierarchy
route セグメントの特別なファイルで定義された React Component は、特定の階層でレンダリングされます:
layout.js
template.js
error.js
(React error バウンダリ)loading.js
(React suspense バウンダリ)not-found.js
(React error バウンダリ)page.js
またはネストされたlayout.js
ネストされた route では、セグメントの Component はその親セグメントの Component の内部にネストされます。
Colocation
特別なファイルに加えて、自分のファイル(例えばコンポーネント、 styles 、テストなど)を app
ディレクトリ内のフォルダに配置するオプションがあります。
これは、フォルダが routes を定義する一方で、page.js
または route.js
によって返される内容だけが公にアドレス指定可能だからです。
詳細は、Project Organization and Colocation をご確認ください。
Advanced Routing Patterns
App Router は、より高度なルーティングパターンを実装するための一連の規則も提供しています。これには以下のものが含まれます:
- Parallel Routes:同時に 2 つ以上のページを同一のビューで表示でき、それぞれが独立して操作できるようにします。それらは独自のサブナビゲーションを持つ分割ビューに使用できます。例えば、Dashboards。
- Intercepting Routes: それが別の route の context で表示されるように、route をインターセプトします。現在のページの context が重要であるときにこれらを使用できます。例えば、タスクの編集中にすべてのタスクを表示するか、フィードで写真を拡大するなどです。
これらのパターンを使用すると、小規模チームや個々の開発者が実装するのが従来複雑だった機能を民主化し、より豊かで複雑な UI を build することができます。
Next Steps
あなたが Next.js のルーティングの基本を理解したので、以下のリンクをたどって初めての routes を作成してみてください。