ゼロから学ぶ React, Next.js⑪【Learn Next.js】Chapter4
レイアウトとページの作成
これまでのところ、アプリケーションにはホームページしかありません。レイアウトとページを使ってどのように新しいルートを作成できるかを学びましょう。
この章で扱うトピック
- ➰ ファイルシステムルーティングを使ってダッシュボードルートを作成する方法
- 📁 新しいルートセグメントを作成する際のフォルダとファイルの役割を理解する
- 📃 複数のダッシュボードページ間で共有できるネストされたレイアウトを作成する方法
- ⬇️コロケーション、部分レンダリング、ルートレイアウトについて理解する
ネストされたルーティング
Next.jsでは、フォルダを使ってネストされたルートを作成するファイルシステムルーティングが採用されています。フォルダはURLの一部分に対応するルートの一部分を表しています。
layout.tsx
とpage.tsx
ファイルを使用して、各ルートに個別のUIを作成できます。
page.tsx
は、Reactコンポーネントをエクスポートする特別なNext.jsファイルで、ルートにアクセスできるようにするために必要です。アプリケーションには、すでに/app/page.tsx
というページファイルがあります。これは、ルート/
に関連付けられたホームページです。
ネストされたルートを作成するには、フォルダを互いにネストし、その中にpage.tsx
ファイルを追加します。例えば:
/app/dashboard/page.tsx
は、パス/dashboard
に関連付けられています。それがどのように機能するかを見るために、ページを作成しましょう!
ダッシュボードページの作成
/app
の中にdashboard
という新しいフォルダを作成します。次に、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
という新しいファイルを追加し、以下のコードを貼り付けます:
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
propを受け取ります。<Layout />
の子コンポーネントは、ページまたは別のレイアウトのいずれかです。この場合、/dashboard
内のページは自動的に<Layout />
内にネストされます:
<Layout />
コンポーネントは、サイドナビゲーションとメインコンテンツエリアを持つダッシュボードページのレイアウトを定義します。サイドナビゲーションは<SideNav />
コンポーネントで、メインコンテンツエリアはchildren
propで渡されるページコンポーネントです。
変更を保存し、localhostを確認して、すべてが正しく機能していることを確認してください。以下のように表示されるはずです:
Next.jsでレイアウトを使用することの利点の1つは、ナビゲーション時にページコンポーネントのみが更新され、レイアウトは再レンダリングされないことです。これは部分レンダリングと呼ばれます:
ルートレイアウト
第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>
);
}
これはルートレイアウトと呼ばれ、必須です。ルートレイアウトに追加したUIは、アプリケーションのすべてのページ間で共有されます。ルートレイアウトを使用して、<html>
タグと<body>
タグを変更し、メタデータを追加できます(メタデータについては後の章で詳しく説明します)。
新しく作成したレイアウト(/app/dashboard/layout.tsx
)はダッシュボードページ専用なので、上記のルートレイアウトにUIを追加する必要はありません。
クイズの時間です!
知識をテストし、学んだことを確認しましょう。Next.jsのレイアウトファイルの目的は何ですか?
A. グローバルなエラーハンドラとして機能する
B. データをフェッチし、アプリケーション全体の状態を管理する
C. 複数のページ間でUIを共有する
D. アプリケーション全体のエントリーポイントとして機能する
解答
C. 複数のページ間でUIを共有する
レイアウトファイルは、アプリケーションのすべてのページが使用できる共有レイアウトを作成するための最良の方法です。
次の章
Discussion