チャプター4

レイアウトとページを作成する

現時点では、アプリケーションにはホームページしかありません。レイアウトとページを使って、さらに多くのルートを作成する方法を学びましょう。

このチャプターでは...

カバーするトピックは以下の通りです

ファイルシステムルーティングを使用してdashboardルートを作成する。

新しいルートセグメントを作成する際のフォルダとファイルの役割を理解する。

複数のダッシュボードページ間で共有できるネストされたレイアウトを作成する。

コロケーション、部分レンダリング、ルートレイアウトがそれぞれ何であるかを理解する。

ネストされたルーティング

Next.jsはファイルシステムルーティングを使用しており、フォルダを使ってネストされたルートを作成します。各フォルダは、URLセグメントに対応するルートセグメントを表します。

Diagram showing how folders map to URL segments

layout.tsxファイルとpage.tsxファイルを使用して、各ルートに個別のUIを作成できます。

page.tsxは、Reactコンポーネントをエクスポートする特別なNext.jsファイルであり、ルートがアクセス可能であるために必要です。アプリケーションにはすでにページファイル/app/page.tsxがあります。これはルート/に関連付けられたホームページです。

ネストされたルートを作成するには、フォルダを互いにネストし、その中にpage.tsxファイルを追加します。例：

Diagram showing how adding a folder called dashboard creates a new route '/dashboard'

/app/dashboard/page.tsxは/dashboardパスに関連付けられています。動作を確認するためにページを作成してみましょう！

ダッシュボードページの作成

/app内にdashboardという新しいフォルダを作成します。次に、dashboardフォルダ内に以下の内容で新しいpage.tsxファイルを作成します。

/app/dashboard/page.tsx

export default function Page() {
  return <p>Dashboard Page</p>;
}

さて、開発サーバーが実行されていることを確認し、https://:3000/dashboardにアクセスしてください。「Dashboard Page」というテキストが表示されるはずです。

これがNext.jsで異なるページを作成する方法です。フォルダを使用して新しいルートセグメントを作成し、その中にpageファイルを追加します。

pageファイルに特別な名前を付けることで、Next.jsはUIコンポーネント、テストファイル、およびその他の関連コードをルートとコロケートすることができます。pageファイル内のコンテンツのみが公開アクセス可能です。例えば、/uiと/libフォルダは、ルートと一緒に/appフォルダ内にコロケートされています。

演習：ダッシュボードページの作成

さらにルートを作成する練習をしましょう。ダッシュボードで、さらに2つのページを作成します。

顧客ページ：このページは、https://:3000/dashboard/customersでアクセスできる必要があります。今のところ、<p>Customers Page</p>要素を返すようにしてください。
請求書ページ：請求書ページは、https://:3000/dashboard/invoicesでアクセスできる必要があります。今のところ、<p>Invoices Page</p>要素も返すようにしてください。

この演習に取り組むのに時間をかけ、準備ができたら、以下のトグルを展開して解答を確認してください。

ダッシュボードレイアウトの作成

ダッシュボードには、複数のページで共有されるナビゲーション機能があります。Next.jsでは、特別なlayout.tsxファイルを使用して、複数のページ間で共有されるUIを作成できます。ダッシュボードページ用のレイアウトを作成しましょう！

/dashboardフォルダ内に、layout.tsxという新しいファイルを追加し、以下のコードを貼り付けます。

/app/dashboard/layout.tsx

import SideNav from '@/app/ui/dashboard/sidenav';
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
      <div className="w-full flex-none md:w-64">
        <SideNav />
      </div>
      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
    </div>
  );
}

このコードにはいくつかの要素があるので、分解して見ていきましょう。

まず、<SideNav />コンポーネントをレイアウトにインポートしています。このファイルにインポートするすべてのコンポーネントは、レイアウトの一部になります。

<Layout />コンポーネントはchildrenプロップを受け取ります。この子要素はページであるか、別のレイアウトであることができます。今回の場合、/dashboard内のページは自動的に<Layout />内にネストされます。

Folder structure with dashboard layout nesting the dashboard pages as children

変更を保存してローカルホストを確認し、すべてが正しく動作しているか確認してください。以下が表示されるはずです。

Dashboard page with a sidenav and a main content area

Next.jsでレイアウトを使用する利点の1つは、ナビゲーション時にレイアウトが再レンダリングされず、ページコンポーネントのみが更新されることです。これは部分レンダリングと呼ばれ、ページ間の遷移時にレイアウト内のクライアントサイドReactステートを保持します。

Folder structure showing the dashboard layout nesting the dashboard pages, but only the pages UI swap on navigation

ルートレイアウト

第3章では、別のレイアウト、つまり/app/layout.tsxにInterフォントをインポートしました。補足として：

/app/layout.tsx

import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.className} antialiased`}>{children}</body>
    </html>
  );
}

これはルートレイアウトと呼ばれ、すべてのNext.jsアプリケーションで必須です。ルートレイアウトに追加するUIは、アプリケーション内のすべてのページで共有されます。ルートレイアウトを使用して、<html>タグと<body>タグを変更したり、メタデータを追加したりできます（メタデータの詳細については後のチャプターで学びます）。

作成したばかりの新しいレイアウト（/app/dashboard/layout.tsx）はダッシュボードページに固有のものであるため、上記のルートレイアウトにUIを追加する必要はありません。