章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>;
}

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

このようにして、Next.jsでさまざまなページを作成できます。フォルダを使用して新しいルートセグメントを作成し、その中に`page`ファイルを追加します。

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

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

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

顧客ページ：このページはhttp://localhost:3000/dashboard/customersからアクセスできます。現時点では、`
Customers Page
`要素を返す必要があります。
請求書ページ：請求書ページはhttp://localhost:3000/dashboard/invoicesからアクセスできます。現時点では、`
Invoices Page
`要素も返す必要があります。

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

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

ダッシュボードには、複数のページで共有されるナビゲーションがあります。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>
  );
}

このコードではいくつかのことが行われているので、分解してみましょう。

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

``コンポーネントは`children`プロップを受け取ります。この子要素は、ページまたは別のレイアウトのいずれかです。この場合、`/dashboard`内のページは自動的に次のように``内にネストされます。

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つは、ナビゲーション時にページコンポーネントのみが更新され、レイアウトが再レンダリングされないことです。これは部分レンダリングと呼ばれます。

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>
  );
}

これはルートレイアウトと呼ばれ、必須です。ルートレイアウトに追加するUIは、アプリケーションのすべてのページで共有されます。ルートレイアウトを使用して、``タグと``タグを変更し、メタデータを追加できます（メタデータの詳細については、後の章で説明します）。

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