Routing

Next.js は、React ベースのフレームワークで、サーバーサイドレンダリングや静的サイト生成などの機能を提供しています。今回は、次の公式ドキュメントより、Next.js のルーティングについて詳しく解説します。最近のでは、Next.js にいくつかの新機能とルートへの変更が導入され、パワーアップして使いやすくなりました。

Building Your Application: Routing | Next.js

ルーティングとは？

ルーティングとは、アプリケーションの骨格を形成するもので、ユーザーが特定の URL にアクセスしたときにどのページを表示するかを決定します。Next.js では、ルーティングは非常に直感的で、ファイルシステムベースのルーティングが採用されています。つまり、pages ディレクトリ内のファイル構造がそのまま URL のパス構造となります。

少しわかりやすく解説してみましょう。

ルーティングとは、ウェブサイトの地図のようなものです。あなたがウェブサイトの中でどこに行きたいかを決めるのがルーティングの役割です。

例えば、あなたが公園で遊んでいて、遊具の場所を探しているとしましょう。公園の地図があれば、どこに滑り台があるか、どこにブランコがあるかをすぐに見つけることができますよね。ルーティングも同じようなもので、ウェブサイトの中でどこに何があるのかを示してくれます。

Next.js のルーティングは、それがどのように動作するかを決める特別なルールがあります。それは「ファイルシステムベースのルーティング」と呼ばれ、ウェブサイトの各ページは特定のファイルに対応しています。これは、公園の地図に各遊具の場所が明示されているのと同じです。

例えば、pages フォルダに about.js というファイルがあると、ウェブサイトの /about という場所にアクセスするとそのファイルが表示されます。これは、地図で「滑り台」を見つけて、その場所に行くと本当に滑り台があるのと同じです。

だから、ルーティングはウェブサイトの地図のようなものだと覚えておいてください。それはあなたがウェブサイトの中でどこに行きたいかを教えてくれます。

ルートの定義

もう少し詳しく解説しましょう。Next.js は「ファイルシステムベースのルーター」を使っています。これは、フォルダがウェブサイトの各場所を作るという意味です。フォルダはウェブサイトの地図の一部を作り、それぞれのフォルダはウェブサイトの一部を示します。フォルダを他のフォルダの中に入れることで、ウェブサイトの中に小さな場所を作ることができます。

特別な page.js ファイルを使って、ウェブサイトの各場所をみんなが見ることができるようにします。例えば、/dashboard/analytics という場所は、対応する page.js ファイルがないため、公開されていません。このフォルダは、コンポーネントやスタイルシート、画像などを保存するために使われます。

また、特別なファイルを使って、ウェブサイトの各場所の見た目を作ります。一番よく使われるのは pages と layouts です。pages はその場所だけの特別な見た目を作り、layouts はいくつかの場所で共有される見た目を作ります。

例えば、最初のページを作るためには、app ディレクトリに page.js ファイルを追加し、React コンポーネントをエクスポートします。これは、新しい遊具を公園に追加するようなものです。

Pages と Layouts

Next.js のウェブサイトで「場所」（これをページと呼びます）と「見た目」（これをレイアウトと呼びます）をどのように作るかについて説明します。

まず、ページについてです。ページはウェブサイトの特定の場所で見ることができるものです。例えば、「ホームページ」や「お問い合わせページ」などがそれに当たります。これらのページを作るためには、page.js という特別なファイルを作ります。このファイルには、そのページの見た目や動きを決めるコードが書かれています。

次に、レイアウトについてです。レイアウトはウェブサイトの全体的な見た目を決めるもので、たくさんのページで共通して使われます。例えば、ヘッダーやフッター、サイドバーなどがそれに当たります。これらのレイアウトを作るためには、layout.js という特別なファイルを作ります。このファイルには、レイアウトの見た目や動きを決めるコードが書かれています。

そして、ページとレイアウトは一緒に使われて、ウェブサイトの各場所を作ります。レイアウトはページの背景のようなもので、ページはその上に表示される内容です。例えば、ヘッダー（レイアウト）の下にニュース記事（ページ）が表示される、というような感じです。

テンプレートはレイアウトと似ていますが、ページが切り替わるたびに新しく作られます。これは、ページごとにアニメーションを設定したり、ページごとに特定の動きをさせたいときに便利です。

ルーティング用語一覧表

以下に Next.js のルーティングに関連する主要な用語を表形式でまとめてみました。

用語	説明
Tree	階層構造を視覚化するための慣習。例えば、親と子コンポーネントのコンポーネントツリーやフォルダ構造など。
Subtree	ツリーの一部。新しいルート（最初）から葉（最後）まで。
Root	ツリーやサブツリーの最初のノード。例えば、ルートレイアウトなど。
Leaf	子供がいないサブツリーのノード。例えば、URL パスの最後のセグメントなど。
URL Segment	スラッシュで区切られた URL パスの一部。
URL Path	ドメインの後に来る URL の一部（セグメントで構成される）。
App Directory	Next.js 13 で導入された、新しい App Router が動作するディレクトリ。
App Router	React Server Components を基に作られた、共有レイアウト、ネストされたルーティング、ローディング状態、エラーハンドリングなどをサポートするルーター。
Server-Centric Routing	サーバーコンポーネントとサーバー上でのデータフェッチとの整合性を保つためのルーティング方式。
Client-Side Navigation	ユーザーが新しいルートに移動するときにブラウザがページをリロードしない振る舞い。
Partial Rendering	兄弟ルート間で移動するときに、変更されるルートのレイアウトとページのみをフェッチしてレンダリングする振る舞い。

Next.js の App Router

Next.js 13 からは、新たに App Router が導入されました。これは React Server Components を基に作られており、共有レイアウト、ネストされたルーティング、ローディング状態、エラーハンドリングなどをサポートしています。

App Router は新たに app ディレクトリ内で動作し、pages ディレクトリと並行して動作します。これにより、一部のルートを新しい振る舞いに適応させつつ、他のルートは pages ディレクトリの以前の振る舞いを保持することが可能となります。

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

Next.js では、フォルダはルートを定義し、ファイルはルートセグメントの UI を作成するために使用されます。特に app ディレクトリ内では、特別なファイルが提供されており、これらを使用することで特定の振る舞いを持つ UI を作成することができます。例えば、layout.js はセグメントとその children の共有 UI を作成し、page.js はルートのユニークな UI を作成し、ルートを公開アクセス可能にします。

ファイル名	役割
layout	共通のレイアウト。セグメントとその children の共有 UI を作成
page	ルートのユニークな UI を作成し、ルートを公開アクセス可能にする
loading	準備中の UI。セグメントとその children のローディング UI を作成
not-found	セグメントとその children の「見つからない」UI を作成
error	セグメントとその children のエラー UI を作成
global-error	グローバルエラー UI
route	サーバーサイド API エンドポイント
template	特化した再レンダリングされるレイアウト UI
default	共通の外観。パラレルルートのフォールバック UI

これらのファイルは、ネストされたルートで特定の振る舞いを持つ UI を作成するために Next.js によって提供されています。それぞれのファイルは特定の役割を果たし、それぞれのルートセグメントやその children に対する UI を定義します。

サーバーセントリックなルーティング

App Router は、Server Components とサーバー上でのデータフェッチとの整合性を保つために、サーバーセントリックなルーティングを採用しています。これにより、クライアントはルートマップをダウンロードする必要がなく、Server Components のリクエストと同じリクエストをルートの検索に使用できます。この最適化はすべてのアプリケーションに有用ですが、多くのルートを持つアプリケーションにはより大きな影響を与えます。

しかし、ルーティングがサーバーセントリックである一方で、ルーターは Link Component を使用したクライアントサイドのナビゲーションを採用しています。これは、ユーザーが新しいルートに移動するときにブラウザがページをリロードしないという、シングルページアプリケーションの振る舞いを模倣しています。代わりに、URL が更新され、Next.js は変更されるセグメントのみをレンダリングします。

部分的なレンダリング

Next.js は、兄弟ルート間で移動するとき（例えば、/dashboard/settings と /dashboard/analytics など）、変更されるルートのレイアウトとページのみをフェッチしてレンダリングします。それ以上のセグメントでは、何も再フェッチや再レンダリングされません。これにより、ユーザーが兄弟ページ間で移動するときにレイアウトが保持されます。