エンジニアリング

Next.jsのApp Routerを理解して使ってみよう

2024.08.29
2024.12.04

1 はじめに
2 チュートリアルの全体像
3 ルート定義
4 ルートグループ
5 レイアウト
6 ダイナミックルート
7 ナビゲーション
8 実践編
- - 8.0.1 この続きを見るには？
9 まとめ

はじめに

今回の章では、App Routerの仕組みを理解して使ってみましょう。

チュートリアルの全体像

本チュートリアルを通じて学べる内容は以下のようになります。

動画で学びたい方はこちらから！

ルート定義

まずは、ルート定義の方法について解説します。

Next.jsのApp Routerでは、決められたフォルダやファイルを作ると自動的にルーティングが定義される仕組みになっています。これをファイルベースルーティングと呼びます。

各フォルダがURLのセグメントを表し、page.tsxが実際にアクセスできるファイルになります。

本チュートリアルのルーティング定義は以下のようになっています。

app/
├── (auth)
│   ├── layout.tsx
│   ├── login
│   │   └── page.tsx
│   └── register
│       └── page.tsx
├── (main)
│   ├── dashboard
│   │   └── page.tsx
│   ├── layout.tsx
│   ├── posts
│   │   ├── [id]
│   │   │   ├── edit
│   │   │   │   └── page.tsx
│   │   │   └── page.tsx
│   │   ├── create
│   │   │   └── page.tsx
│   │   └── page.tsx
│   ├── profile
│   │   └── page.tsx
│   └── users
│       ├── [id]
│       │   └── page.tsx
│       └── page.tsx
├── favicon.ico
├── globals.css
├── layout.tsx
└── page.tsx

ルートグループ

ルートグループは、URLには反映されないディレクトリになります。

(main)のように()で囲むと作成することができます。

URLには反映せずに、ファイルをグループ化したい時に使用します。

レイアウト

レイアウト定義

App Routerでは、複数ルートに共通のレイアウトを作成できます。

layout.tsxファイルは以下のように定義します。

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <nav>{/*ここにナビゲーションメニュー*/}</nav>
      <main>{children}</main>
    </div>
  );
}

レイアウトの適用範囲

レイアウトは、同階層以下のファイルに適用されます。

適用されるレイアウトが複数ある場合、下図のように順番に反映されます。

ルートレイアウト

appディレクトリ直下のレイアウトファイルをルートレイアウトと呼びます。

こちらは必須のレイアウトファイルになります。

ルートレイアウトファイルでは、htmlタグとbodyタグの設定が必須になります。

以下がルートレイアウトファイルの例です。

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja">
      <body>{children}</body>
    </html>
  );
}

ダイナミックルート

ダイナミックルートとは、セグメントを動的に扱うようにできるルート定義です。

[id]のようにフォルダ名を [] で囲むと、リクエストされたパラメータに応じて画面を出し分けることができます。

実際に、本チュートリアルで定義されているダイナミックルートを見てみましょう。

ルート定義	URL	機能
app/posts/[id]/page.tsx	/posts/1	投稿詳細
app/posts/[id]/edit/page.tsx	/posts/1/edit	投稿編集
app/users/[id]/page.tsx	/users/1	オーナー詳細