【4章】Next.jsのチュートリアルをやってみた

これはNext.jsの公式チュートリアルの4. Creating Layouts and Pages に関するメモです

前章のメモ

【3章】Next.jsのチュートリアルをやってみた

これはNext.jsの公式チュートリアルの3. Optimizing Fonts and Images に関するメモです前章のメモ Next.jsの公式チュートリアルの該当ページ ...

Next.jsの公式チュートリアルの該当ページ
学ぶこと
ルーティング
ダッシュボードページを作成する
他のページも作ってみる
ダッシュボードレイアウトを作成する
レイアウトを使用するメリット
ルートレイアウト

Next.jsの公式チュートリアルの該当ページ

Learn Next.js: Creating Layouts and Pages | Next.js

Create the dashboard routes and a shared layout that can be shared between multiple pages.

学ぶこと

ファイルベースルーティングを使用してダッシュボードページを作る
新しいルートセグメントを作ったときのフォルダやファイルの理解
複数のダッシュボード間で共有できるレイアウトの作成
コロケーション、部分レンダリング、ルートレイアウトとは何か

ルーティング

Next.jsはファイルベースルーティングを採用しています。

ファイルベースルーティングとは…
ルールに従ってファイルを作成することで自動的にパスが生成されアクセスできる機能

フォルダの構造とURLのパスが対応します。

例えば、example.comにホスティングされているアプリでは、

app　　　　　　　　　// URL：example.com/
├── dashboard　　　 // URL： example.com/dashboard
└── invoices　 // URL： example.com/dashboard/invoices

のようにappフォルダから見た相対パスがURLとなります。

各フォルダにある page.tsx および layout.tsx がパスにアクセスした際のUIを定義しています。

なので、example.comにホスティングされているアプリでは、

example.com/ にアクセス ⇒ /app/page.tsx を表示

example.com/dashboard にアクセス ⇒ /app/dashboard/page.tsx を表示

ダッシュボードページを作成する

/dashboard のパスでアクセスしたいので、/app/dashboard/page.tsx を作成します

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

export default function Page() {

return <p>Dashboard Page</p>;

}

http://localhost:3000/dashboard にアクセスして確認してみましょう

「Dashboard Page」と表示されればOKです！

ほかにも特別なフォルダやファイルがあるので、公式ドキュメントを見てみてください！

他のページも作ってみる

カスタマーページ
1. http://localhost:3000/dashboard/customers でアクセス
2. <p>Customers Page</p> を表示
請求書ページ
1. http://localhost:3000/dashboard/invoices でアクセス
2. <p>Invoices Page</p> を表示

/app/dashboard/customers/page.tsx と /app/dashboard/invoices/page.tsx を作成します

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

export default function Page() {

return <p>Customers Page</p>;

}

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

export default function Page() {

return <p>Invoices Page</p>;

}

http://localhost:3000/dashboard/customers と

http://localhost:3000/dashboard/invoices にアクセスして確認してみましょう！

ダッシュボードレイアウトを作成する

layout.tsx というファイルは、複数のページでUIを共有できます

例として、ダッシュボードのレイアウトを作成していきます。

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

import SideNav from '@/app/ui/dashboard/sidenav';

export default function Layout({ children }: { children: React.ReactNode }) {

return (

</div>

<div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>

</div>

);

}

/app/ui/dashboard/sidenav.tsx からインポートしたSideNavコンポーネントをサイドバーとして表示

別のレイアウトや内容は引数（children）に入ってきます。

page.tsxで書いたコードの内容がlayout.tsxのchildrenに入ってくるイメージですね

http://localhost:3000/dashboard にアクセスして確認してみましょう

左側にサイドバーが表示されていればOKです！

レイアウトを使用するメリット

Next.jsでレイアウトを利用するメリットの1つは、部分レンダリングされることです。

部分レンダリングとは…
ページ遷移時にページコンポーネント（page.tsxの内容）のみを再レンダリングし、レイアウト部（layout.tsxの内容）は再レンダリングされないこと

ページの読み込み速度が向上しそうですね

ルートレイアウト

/app/layout.tsx はルートレイアウトと呼ばれ、アプリ全体のUIを定義しています。

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