Zenn
📚

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

2025/01/06に公開
Next.js
tech

これはNext.js の公式チュートリアルの 4. Creating Layouts and Pages やってみたメモです

前章のメモ

https://zenn.dev/kuuki/articles/nextjs-tutorial-03/

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

https://nextjs.org/learn/dashboard-app/creating-layouts-and-pages

学ぶこと

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

ルーティング

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

各フォルダにある page.tsxおよび layout.tsxがパスにアクセスした際の UI を定義しています。
なので、example.com にホスティングされているアプリでは、

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

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

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

/app/dashboard/page.tsx
export default function Page() {
  return <p>Dashboard Page</p>;
}

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

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

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

https://nextjs.org/docs/app/building-your-application/routing

他のページも作ってみる

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

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

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

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

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

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

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

ダッシュボードのレイアウト(/app/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>
  );
}

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

別のレイアウトや内容は引数（children）に入ってきます。
-> page.tsx で書いたコードの内容が layout.tsx の children に入ってくるイメージですね

http://localhost:3000/dashboard にアクセスして確認してみましょう
左側にサイドバーが表示されていれば OK です！

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

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

ルートレイアウト

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

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

次章のメモ

https://zenn.dev/kuuki/articles/nextjs-tutorial-05/

Discussion