useParamsの使い方：動的ルートの値をClient Componentで読む
useParamsで動的ルートのslugを取得します。単一セグメントとcatch-allの型の違い、クエリ文字列との使い分けを説明します。
useParamsで動的ルートのslugを取得します。単一セグメントとcatch-allの型の違い、クエリ文字列との使い分けを説明します。
対象環境と役割
App Routerで使う機能
この記事のApp Routerの例はNext.js 15以降の非同期リクエストAPIに合わせた書き方です。Next.js 16ではCache Componentsを有効にしない構成を前提とします。Pages Routerの記事とは配置先・実行場所が異なるため、プロジェクトのルーターとバージョンを先に確認してください。
TypeScriptの例は5.2以降と、利用するNext.jsが対応するNode.jsを前提にします。app/layout.tsx を備えたApp Routerプロジェクトで実行してください。
引数・戻り値・受け渡すデータ
useParams<{ slug: string }>() の型引数は想定する形を記述します。実行時の入力検証ではありません。[...slug] は文字列配列、通常の [slug] は文字列です。
コード例を動かす
app/param-demo/[slug]/page.tsx を作成する
以下はこのファイルとして配置する例です。既存ファイルへ追記する場合は、同じ名前のexportやURLが重複しないように統合してください。
'use client';
import { useParams } from 'next/navigation';
export default function ParamDemo() {
const params = useParams<{ slug: string }>();
return <main><h1>動的ルート</h1><p>slug: {params.slug}</p></main>;
}実行結果と処理の順序
Next.jsのサーバー実行環境で /param-demo/react を開くとreactと表示されます。?slug=next を追加しても、パスのslugはreactのままです。
動的な値をページの子へ何段も受け渡す代わりにClient Componentで直接読む用途があります。ただし汎用の部品をルートから独立させたい場合は、普通のpropsを渡す設計のほうが再利用しやすくなります。
つまずきやすい点と使い分け
paramsは検索条件ではない
URLの ?key=value は useSearchParams で読みます。URLのどの部分が情報源なのかを画面仕様と合わせて決めてください。
型引数だけで不正な値を防げない
slugから商品を取得する前に形式や存在を検証します。存在しない値はページのサーバー側やAPI側で適切に扱い、画面側で隠すだけのアクセス制御にしないようにします。
静的出力で使えるか
このコード単体は動的URLをサーバーで受け付ける例です。静的出力ではServer Componentのpageで generateStaticParams を定義し、Hookを使う部分を別のClient Componentへ切り出して、生成対象を列挙する必要があります。
確認課題と実務への応用
自分で値を変えて確認する
[...slug] へ変更した別のルートを作り、型を string[] にして2階層以上のURLを表示します。省略を許す [[...slug]] では未指定のケースも試してください。
開発サーバーだけでなく、本番用ビルドと公開先でも確認します。URLを直接開く場合と画面内のリンクから遷移する場合、値がない場合と不正な値の場合を分けて試すと、型だけでは防げない入力の問題が見つかります。
公式資料と関連する記事
Googleの優先するニュース提供元にSEの部屋を追加
Googleで、いつも読みたい情報源を選べます。登録可否はGoogleの画面で確認できます。
候補にSEの部屋が表示されない場合は、まだ追加できません。