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

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

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

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

 ルートレイアウト第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を共有する

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

 次の章https://zenn.dev/gunjo/articles/b6b26099a2dae7