Next.jsのルーティングの仕組み

Vercelチームは、シンプルなルーティング手法を採用しています。フォルダをルートとして利用する方式です。つまり、appフォルダ内にフォルダを追加するほど、ルートが増えていきます。さらに、あるフォルダ（ルート）の中に新しいフォルダを作成すると、ネストされたルートが作成されます。これらの概念をより理解するために、下記の画像を参照してください。

フォルダ構成を整理しましたが、次にそれらのフォルダ内に存在するファイルについて説明します。Next.jsでは、page.tsxとlayout.tsxという2種類のファイルタイプが用意されています。両者の違いは役割にあります。

• layout.tsxは、複数ページで共有される特別なUI要素をまとめる役割を担います。
• 一方、page.tsxは現在のルートに特化したUIを担当し、URLの変化に応じて動的に適用されます。特定のルートに関連する独自のコンテンツや機能のビジュアル表現を担います。

プロジェクトに戻る

アプリケーション用に/dashboardというネストされたルートを作成します。以下の手順に従ってください。

1. dashboardフォルダ内に新しくappフォルダを作成します。
2. 作成したdashboardフォルダ内に、page.tsxという新しいファイルを作成します。
3. 次の内容をpage.tsxファイルにコピー＆ペーストします。

すべての必要な手順を完了したら、次のURLを開いてください： http://localhost:3000/dashboard。作成したページ（Dashboard Page テキスト）が表示されます。

次の章では、引き続きページの作成を進めます。まだ続きがありますので、ご安心ください。