🐥

Next.js :ルーティング

2024/12/03に公開

この記事は、プログラミング初心者である筆者が、学習の過程でつまずいた経験をもとに備忘録としてまとめたものです。今回はルーティングについてまとめました。

ルーティング

ルーティングとは、アプリケーション内で特定のURLにアクセスしたときに、どのページを表示するかを決定する仕組みです。Next.jsではファイルベースのルーティングを採用しており、ディレクトリ構造がそのままURL構造になるという特徴があります。

App Routerの階層構造の基本: Tree（Root）とLeaf

ディレクトリ構造をTree🌲（木）のように扱い、Root（根）と Leaf（葉）という概念が階層設計の基本となっています。また、各階層はさらに小さなSubeTreeに分けることができます。

├── layout.js       # 全体共通レイアウト
├── page.js         # トップページ (/)
├── about/
│   ├── layout.js   # Aboutセクション共通レイアウト
│   ├── page.js     # Aboutページ (/about)
│   └── team/
│       └── page.js # チームページ (/about/team)
└── blog/
    ├── layout.js   # ブログ共通レイアウト
    ├── page.js     # ブログ一覧 (/blog)
    └── [id]/
        └── page.js # 個別記事 (/blog/:id)

[URLの説明]
・/ → トップページ
・/about → Aboutセクションの基盤
・/about/team → チームページ
・/blog → ブログ一覧ページ
・/blog/123 → 個別ブログ記事

APP Routerのルーティング

App Routerでは、/app 配下にフォルダやファイルを配置することで、ファイル構造がそのままURL構造に対応します。以下は具体例とその意味の解説です。

静的なページ

/app/page.tsx→ https://xxx.com
#ルートプロジェクト（TOPページ）が表示される
/app/next/page.tsx→ https://xxx.com/next
#next フォルダ内のページが表示される
/app/next/nextnext/pade.tsx→ https://xxx.com/next/nextnext
#ネスト（階層化）されたルート

動的なページ（Dynamic Routes）
ファイル名に[]（角括弧）を使うことで、動的なURL（パラメータを含むURL）を表現できる。File-Based Routingを採用しているため、ディレクトリを作るだけでルーティング設定ができる(メリット）。

/app/tags/[id]/page.tsx
#"tags" ページで（記事ID）に対応するページが表示される。

ファイル規約

特殊な役割を持つファイルがあるので使用の際は気を付けます。これらのファイルは規約に従って使わないと正しく動作しません。

コンポーネント階層

ファイル規約で定義したファイル群は自動的に同階層（Root Segment)のpage.tsxにレンダリングされます。つまり、ファイルを宣言するだけでレンダリング階層になっています。ネストされたルートでも同じです。

プロジェクト整理機能

・プライベートフォルダ：フォルダの前に_(アンダースコア）をつける。プライベートフォルダとして、ルーティングには影響を与えないフォルダを作成。
・ルートグループ：プロジェクトをグループ化できる。フォルダ名を（）にする。ルートURLには含まれない。
・/src：ソースコードを一箇所にまとめて管理し、プロジェクトの構造を整えるディレクトリ。/appはルーティングだけに集中させたい時や、プロジェクト設定を入れたくない場合に有効。

ルーティング設計のベストプラクティス

・/appの外側にプロジェクトファイルを配置。主に「ルーティングに関係しない」ファイル（ユーティリティや共通コンポーネント）を置くために使う。

/src/
  ├── app/
  │    ├── page.tsx         // ルートページ
  │    ├── about/page.tsx   // Aboutページ
  ├── components/           // 共通コンポーネント
  │    ├── Header.tsx
  │    ├── Footer.tsx
  ├── utils/                // ユーティリティ関数
       ├── fetchData.ts

・/app内側のトップフォルダにプロジェクトファイルを配置

/app/
  ├── layout.tsx         // 共通レイアウト
  ├── page.tsx           // トップページ
  ├── components/        // 共通コンポーネント
  │    ├── Header.tsx
  │    ├── Footer.tsx
  ├── styles.css         // グローバルスタイル

・機能やRouteごとにプロジェクトファイルを配置

/app/
  ├── page.tsx               // トップページ
  ├── about/
  │    ├── page.tsx          // Aboutページ
  │    ├── components/
  │    │    ├── TeamMember.tsx
  │    ├── styles.css
  ├── blog/
       ├── page.tsx          // ブログ一覧ページ
       ├── [id]/
            ├── page.tsx     // 動的ルート: ブログ詳細ページ
            ├── styles.css

プロジェクト配置のベストプラクティス

・Atomic Web Design (Brad Frost)

・Bulletproof React (Zenn記事: Bulletproof React 2022)