Next.jsのチュートリアルをやってみる【レイアウトとページ編】

前回

2024年7月28日 Next.jsのチュートリアルをやってみる【フォントと画像の最適化編】

はじめに

前回までのアプリではホームページだけが存在している状態です。続いて、レイアウトとページを使用してルートを作る方法を学んでいきます。

ネストされたルート

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」という文字列が表示されているはずです。このようにフォルダの中にpage.tsxを作成すると、様々なページを作成することができます。pageファイルに特別な名前を付けることではNext.jsではUIコンポーネント、テストファイル、関連コードをルートと一緒に配置することができます。pageファイル内のコンテンツだけが一般公開されます。例えば/uiフォルダや/libフォルダは/appフォルダ内にルートと一緒に配置されています。

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

「ダッシュボードで2つのページを作る」という練習課題が出てきました。回答を確認する前に作成してみましょう。

ページ名	リンク	内容
顧客ページ	http://localhost:3000/dashboard/customers	`<p>Customers Page</p>`要素を返す
請求書ページ	http://localhost:3000/dashboard/invoices	`<p>Invoices Page</p>`要素を返す

回答

まずは/app/dashboardフォルダの中にcustomersフォルダとinvoicesフォルダを作成します。

続いて/app/dashboard/customerフォルダの中に以下の内容のpage.tsxファイルを作成します。

/app/dashboard/customers/page.tsx

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

そして/app/dashboard/invoiceフォルダの中に以下の内容のpage.tsxファイルを作成します。

/app/dashboard/invoice/page.tsx

export default function Page() {
  return <p>Invoice 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を受け取ります。このchildrenはページか別のレイアウトのどちらかになります。今回は/dashboardの中のページは自動的に<Layout />の中にネストされます。

変更を保存したら、再度ダッシュボードページを確認してみましょう。以下のような画面が表示されたらレイアウトの反映成功です。

Next.jsでレイアウトを使用すれば、ナビゲーション時にページコンポーネントだけが更新さることです。つまり、レイアウトは再レンダリングせずに、部分レンダリングになるということです。

ルートレイアウト

前回はInterフォントを/app/layout.tsxレイアウトにインポートしました。

これはルートレイアウトと呼ばれ、必須ファイルとなります。ルートレイアウトに追加したUIはアプリケーションのすべてのページで共有されます。ルートレイアウトを使用して<html>タグと<body>タグを修正してメタデータを追加することができます。今作成した新しいレイアウトの/app/dashboard/layout.tsxはダッシュボードページ固有のレイアウトとなりますので、ルートレイアウトにＵＩを追加する必要はありません。

まとめ

URLはフォルダ階層がマップされたURLになる。
ルートを作るにはフォルダをネストさせ、その中にpage.tsxとlayout.tsxを作成する必要がある。
ページはルート固有のUIとなる。
レイアウトは複数のページで共有されるUI
一番上のレイアウトはルートレイアウトと呼び、アプリケーション全体で共有される。
- ルートレイアウトには<html>タグと<body>タグを含まなければならない。
レイアウトは再レンダリングされない