Pageのprops：params・searchParamsの違いと入力検証
App RouterのPageが受け取るparamsとsearchParamsを個別に整理します。Promiseの解決、配列になり得る検索条件、ページ番号の検証を実例で学びます。
App RouterのPageが受け取るparamsとsearchParamsを個別に整理します。Promiseの解決、配列になり得る検索条件、ページ番号の検証を実例で学びます。
対象環境と役割
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プロジェクトで実行してください。
引数・戻り値・受け渡すデータ
params はルートの動的セグメント、searchParams はURLの検索条件です。Next.js 15以降の例ではどちらもPromiseとして受け取ります。searchParamsは URLSearchParams ではありません。
コード例を動かす
app/topic/[slug]/page.tsx を作成する
以下はこのファイルとして配置する例です。既存ファイルへ追記する場合は、同じ名前のexportやURLが重複しないように統合してください。
type Props = {
params: Promise<{ slug: string }>;
searchParams: Promise<{ page?: string | string[] }>;
};
export default async function TopicPage({ params, searchParams }: Props) {
const { slug } = await params;
const query = await searchParams;
const raw = query.page;
const number = typeof raw === 'string' && /^[1-9]\d{0,3}$/.test(raw) ? Number(raw) : 1;
return <main><h1>テーマ: {slug}</h1><p>ページ: {number}</p></main>;
}実行結果と処理の順序
/topic/react?page=2 はテーマreact、ページ2です。page=0、負数、重複指定、5桁以上では既定値1になります。
数字へ変換する前に形と上限を検証しておくと、DBのOFFSETやAPIのページ数に過大な値を渡すことを防ぎやすくなります。この例の上限9999は説明用で、実務ではデータ件数に合わせます。
つまずきやすい点と使い分け
Pageへ任意のpropsが自動で入るわけではない
PageはNext.jsが呼び出す入口です。任意のuserやproductsが自動注入されることはありません。サーバーで取得するか、URLを解決して子コンポーネントへ渡します。
繰り返し指定を考える
?page=1&page=2 のようなURLでは値が配列になります。型アサーションで文字列と決めつけるのではなく、採用・拒否・既定値などの方針を定義します。
静的出力で使えるか
この例はリクエストごとのサーバー処理を必要とします。output: 'export' で生成した out を配信するだけのサーバーでは実行できません。Next.jsのサーバー実行環境か別のAPIを用意します。
確認課題と実務への応用
自分で値を変えて確認する
pageなし、2、0、-1、abc、繰り返し指定の6ケースを試します。URLの値を認可に使わず、アクセス可能なテーマかどうかはサーバーで別途判断してください。
開発サーバーだけでなく、本番用ビルドと公開先でも確認します。URLを直接開く場合と画面内のリンクから遷移する場合、値がない場合と不正な値の場合を分けて試すと、型だけでは防げない入力の問題が見つかります。
公式資料と関連する記事
Googleの優先するニュース提供元にSEの部屋を追加
Googleで、いつも読みたい情報源を選べます。登録可否はGoogleの画面で確認できます。
候補にSEの部屋が表示されない場合は、まだ追加できません。