チャプター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という名前の新しいファイルを作成し、次の内容を貼り付けます。

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という名前の新しいファイルを追加し、次のコードを貼り付けます。

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

変更を保存し、localhostを確認して、すべてが正しく機能していることを確認してください。次のものが表示されるはずです。

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フォントをインポートしました。おさらいとして:

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を追加する必要はありません。