発行:2026-01-02

Next.jsのルーティング

Next.js の最大の特徴の一つが「ルーティング」の仕組みです。
このページでは、URLとディレクトリがどのように連動しているのか、その基本ルールを解説します。

ルーティングの基本ルール

Next.js では、 「App Router」 という仕組みを採用しており、 ディレクトリ（フォルダ）の構造がそのままURLになります。 これを「ファイルシステムベースのルーティング」と呼びます。

例えば、以下のようなディレクトリ構成を作ったとします。

Directorysrc/
└── app/
    ├── page.tsx           # -> http://localhost:3000/
    ├── about/
    │   └── page.tsx       # -> http://localhost:3000/about
    └── contact/
        └── page.tsx       # -> http://localhost:3000/contact

page.tsx という名前のファイルを置いた場所が、そのままページとしてアクセス可能になります。
特別な設定ファイルにルートを記述する必要はありません。直感的にディレクトリを掘っていけば、それがそのままサイトの構造になります。

実際にページを追加してみよう

試しに、新しいページを作ってみましょう。
src/app ディレクトリの下に test ディレクトリを作成し、その中に page.tsx を作ります。

src/app/test/page.tsxexport default function TestPage() {
    return <h1>This is a test page!</h1>
}

開発サーバー（npm run dev）を起動した状態で、
ブラウザから http://localhost:3000/test にアクセスしてみてください。

作成したページが表示されれば成功です！

動的ルーティング (Dynamic Routes)

ブログ記事や商品ページのように、「同じレイアウトだけどデータだけ違う」ページを量産したい場合があります。
例えば：

/blog/1
/blog/2
/blog/abc

このようにURLの一部が変わるページを作るには、 ディレクトリ名を角括弧 [] で囲みます。 これを 動的ルーティング（Dynamic Routing） と呼びます。

場所: src/app/blog/[slug]/page.tsx

[slug] の部分が、URLの任意の文字列に対応します（変数のようになります）。
slug という名前は自由ですが、一般的にIDやスラグ（識別子）を表す名前を付けます。

実装例

実際に動的ルートを作ってみましょう。
src/app/test の中に [slug] ディレクトリ作成し、さらにその中に page.tsx を作成します。

構成: src/app/test/[slug]/page.tsx

src/app/test/[slug]/page.tsx// Next.js 15以降、params は Promise 型になります
type Props = {
  params: Promise<{ slug: string }>;
};

export default async function DynamicPage({ params }: Props) {
  // params を await してデータを取り出します
  const { slug } = await params;

  return <h1>URL slug is {slug}</h1>
}

[!NOTE]
重要: Next.js 15 から、params は非同期（Promise）で受け取る仕様になりました。
そのため、コンポーネントに async を付け、await params で値を取り出す必要があります。

動作確認

ブラウザから http://localhost:3000/test/1 にアクセスしてみましょう。

画面に "URL slug is 1" と表示されるはずです。

こんどは http://localhost:3000/test/apple にアクセスしてみてください。

"URL slug is apple" と表示が変わりましたか？
このように、URLの一部を変数として受け取り、それを使ってページの内容を動的に変えることができます。
これがブログ詳細ページや商品詳細ページの基本となります。

まとめ

ディレクトリ構成 = URL構成 （ファイルシステムベース）。
ページの実体は page.tsx。
[任意の名前] というディレクトリ名にすると、その部分は動的なパラメータとして受け取れる。

次章では、画面を構成する部品「コンポーネント」について解説します。