メインコンテンツまでスキップ

Dynamic Route Segment と Route Groups

ここからいくつかのSegmentのパターンを紹介します。

注記

Segmentって何だったっけ？という方は、こちら

Dynamic Segment​

Dynamic Segmentは、URL の一部が動的に変わる場合に使います。例えば、/profile/:idのように、:idの部分によって表示する内容を変える場合などです。

Dynamic Segmentのルーティングを設定するには、[id]という名前のディレクトリを作成し、その中にpage.tsxを作成します。

alt text

src/app/profile/[id]/page.tsxに以下のコードを追加してください。

src/app/profile/[id]/page.tsx
type Props = {
  params: {
    id: string;
  };
};

export default function Profile({ params }: Props) {
  return <h1>プロフィールページ: {params.id}</h1>;
}

少しコードが複雑になったので、一つずつ説明します。

まず、Propsという型を定義しています。この型は、Profileコンポーネントに渡されるpropsの型を定義しています。TypeScript を使っているので、このように型を定義することが重要です。

次に、Profileコンポーネントの引数にProps型を指定しています。これによって、Profileコンポーネントにparamsというプロパティが渡されることを示しています。

最後に、params.idを表示することで、URL の:idの部分が表示されるようになります。

http://localhost:3000/profile/1 にアクセスすると、プロフィールページ: 1と表示されていることが確認できます。また、http://localhost:3000/profile/2 にアクセスすると、プロフィールページ: 2と表示が変わることを確認してください。

Route Groups​

Route Groupsは、ページのグループを作成するための機能です。例えば、featureAという機能に関連するページaとbがあるとします。もし、featureAというディレクトリを作成し、その中にaとbというディレクトリを作成すると、URL 上に featureAが含まれることになります。

時には、featureAという文字は URL に含めたくない場合もあります。その場合、featureAディレクトリの名前を、(featureA)というふうに()で囲むことで、URL 上に表示されないようにすることができます。

試しに、profileディレクトリの名前を(profile)に変更してみましょう。

http://localhost:3000/profile/1 を開くと 404 が表示されるようになり、代わりに http://localhost:3000/1 にアクセスすることで、元のページが表示されることが確認できます。

このように、Route Groupsを使うことで、URL に影響を与えずにページをグループ化することができます。

Route Groups で Layout を個別に設定する​

例えば、ログイン前はナビゲーションを上に表示したいが、ログイン後はサイドバーとして表示したいケースなどあると思います。そのような場合、Route Groupsを使って、それぞれのページに異なるレイアウトを適用することができます。

例えば以下のようなフォルダ構成とすることで、ログインページとログイン後のホームページにそれぞれレイアウトを適用できます。

src/app
├── (guest)
│   ├── layout.tsx  // ログイン前のレイアウト
│   ├── login
│   │   └── page.tsx
└── (member)
    ├── layout.tsx  // ログイン後のレイアウト
    └── home
        └── page.tsx

Private Folder とコロケーション​

Private Folder機能を使うと、ルーティングに影響を与えないファイルを配置できます。例えば、Profileにしか使わない UI コンポーネントを配置する場合、profileディレクトリの中にcomponentsディレクトリを作成し、その中にファイルを格納できます。

このように、関連するファイルをまとめて配置することを、コロケーションといいます。

Private Folder​

もし、profile/componentsの下に間違ってpage.tsxを配置してしまった場合、page.tsxはルーティングの対象になってしまいます。そこで、フォルダ名の前に_をつけることで、Private Folderとして扱うことができます。

profile/_componentsのようにフォルダ名を変更することで、_componentsディレクトリの中に配置されたファイルはルーティングの対象にならなくなります。

src/app
└── profile
    ├── _components
    │   └── page.tsx  // ルーティングの対象外
    └── components
        └── page.tsx  // profile/components というURLでアクセスできてしまう

その他の Segment パターン​

その他にも、Catch-all SegmentやOptional Catch-all Segment、Parallel RoutesとIntercepting Routesなどの機能がありますが、今の段階ですべて覚えようとすると理解が追いつかないと思うので、まずはここまで紹介したもので十分です。

アプリを作っていく中で、実現できないことがあれば、その都度調べていくようにしましょう。