【Next.js/TailwindCSS】新規ページを作成してみよう | Next.js Tutorial #4 - Creating Layouts and Pages

ネスト化されたルーティングの仕組み

• Next.jsはディレクトリ階層をそのままURLルーティングに採用することが出来るという特徴がある。

例）
app/
　├ page.tsx
　├ root/page.tsx
　│　└ leaf/
　│　　　└ page.tsx
　└ lib/

• 上記の場合だとleafのURLは、https:localhost:3000/root/leafとなる。
• なお、ルーティングに対応させたいディレクトリにpage.tsxを配置することが必要で、そうでないものに関しては配置する必要が無い。

新規ページを作成してみよう

• 公式チュートリアルでは、dashboardというフォルダを作成し、その中にpage.tsxというファイルを作成します。
• その中に下記のコードを書きます。

/// /app/dashboard/page.tsx
export default function Page() {
  return <p>Dashboard Page</p>;
}

• http://localhost:3000/dashboardにアクセスするとdashboardページを表示することが出来ます。

参考