📁

ゼロから学ぶ React, Next.js⑪【Learn Next.js】Chapter4

2024/05/25に公開

Next.js

React

tech

レイアウトとページの作成

これまでのところ、アプリケーションにはホームページしかありません。レイアウトとページを使ってどのように新しいルートを作成できるかを学びましょう。

この章で扱うトピック

➰ ファイルシステムルーティングを使ってダッシュボードルートを作成する方法
📁 新しいルートセグメントを作成する際のフォルダとファイルの役割を理解する
📃 複数のダッシュボードページ間で共有できるネストされたレイアウトを作成する方法
⬇️コロケーション、部分レンダリング、ルートレイアウトについて理解する

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

Next.jsでは、フォルダを使ってネストされたルートを作成するファイルシステムルーティングが採用されています。フォルダはURLの一部分に対応するルートの一部分を表しています。

フォルダがURLセグメントにマップされる方法を示す図

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

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

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

ダッシュボードという名前のフォルダを追加すると、新しいルート'/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フォルダ内に配置されています。

メモ：コロケーション

コロケーションとは、ある機能に関連するすべてのファイルを1つの場所にまとめることを指します。Next.jsではこの考え方を取り入れており、ページやレイアウトと密接に関連するファイルを同じフォルダ内に置くことができます。

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

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

顧客ページ：ページにはhttp://localhost:3000/dashboard/customersからアクセスできるようにします。とりあえず、<p>Customers Page</p>要素を返します。
請求書ページ：請求書ページにはhttp://localhost:3000/dashboard/invoicesからアクセスできるようにします。こちらも<p>Invoices Page</p>要素を返します。

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

解答

以下のようなフォルダ構造を作成します：
ダッシュボードページのフォルダ構造

顧客ページ:

/app/dashboard/customers/page.tsx

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

請求書ページ:

/app/dashboard/invoices/page.tsx

export default function Page() {
  return <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 />コンポーネントはchildrenpropを受け取ります。<Layout />の子コンポーネントは、ページまたは別のレイアウトのいずれかです。この場合、/dashboard内のページは自動的に<Layout />内にネストされます：

ダッシュボードページを子としてネストするダッシュボードレイアウトのフォルダ構造

<Layout />コンポーネントは、サイドナビゲーションとメインコンテンツエリアを持つダッシュボードページのレイアウトを定義します。サイドナビゲーションは<SideNav />コンポーネントで、メインコンテンツエリアはchildrenpropで渡されるページコンポーネントです。

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

サイドナビとメインコンテンツエリアを持つダッシュボードページ

Next.jsでレイアウトを使用することの利点の1つは、ナビゲーション時にページコンポーネントのみが更新され、レイアウトは再レンダリングされないことです。これは部分レンダリングと呼ばれます：

ダッシュボードページをネストするダッシュボードレイアウトのフォルダ構造ですが、ナビゲーション時にはページUIのみが入れ替わります

ルートレイアウト

第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は、アプリケーションのすべてのページ間で共有されます。ルートレイアウトを使用して、<html>タグと<body>タグを変更し、メタデータを追加できます（メタデータについては後の章で詳しく説明します）。

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

クイズの時間です！
知識をテストし、学んだことを確認しましょう。

Next.jsのレイアウトファイルの目的は何ですか？

A. グローバルなエラーハンドラとして機能する
B. データをフェッチし、アプリケーション全体の状態を管理する
C. 複数のページ間でUIを共有する
D. アプリケーション全体のエントリーポイントとして機能する

解答

C. 複数のページ間でUIを共有する
レイアウトファイルは、アプリケーションのすべてのページが使用できる共有レイアウトを作成するための最良の方法です。