開発トラブルシューティング
Next.js 15: params/searchParamsの非同期化によるエラー
Next.js 15でのparams非同期化に起因するエラーと解決策
Next.js 15: params/searchParamsの非同期化によるエラー
現象
Next.js 15へのアップデート後、動的ルート（[id]など）を持つPageコンポーネントやAPIルートハンドラーにおいて、params や searchParams のプロパティにアクセスしようとすると、値が undefined になったり、実行時エラーが発生したりする。
特に、APIルートでIDを取得できず、データベースクエリが404エラーになるケースが多い。
原因
Next.js 15から、params および searchParams プロパティは Promise (非同期) として提供されるように変更されました。
これにより、以前のように同期的にプロパティにアクセス（例: params.id）することができなくなりました。
参照: Next.js 15 Upgrade Guide - Async Request APIs
解決策
1. Pageコンポーネントの場合
params を await してから使用します。
// Before (Next.js 14)
export default function Page({ params }: { params: { id: string } }) {
return <div>ID: {params.id}</div>;
}
// After (Next.js 15)
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params;
return <div>ID: {id}</div>;
}2. APIルートハンドラーの場合
同様に、第二引数の context オブジェクト内の params を await します。
// Before (Next.js 14)
export async function GET(
request: NextRequest,
{ params }: { params: { id: string } }
) {
const id = params.id;
// ...
}
// After (Next.js 15)
export async function GET(
request: NextRequest,
props: { params: Promise<{ id: string }> }
) {
const params = await props.params;
const id = params.id;
// ...
}注意点
- 型定義も
Promise<...>に変更する必要があります。 useParamsフック（クライアントコンポーネント）はこの変更の影響を受けませんが、サーバーコンポーネントからプロップスとして渡す場合は注意が必要です。- 開発中は警告が出る場合がありますが、本番ビルドではエラーになる可能性があるため、早急に対応することを推奨します。