【Next.js 15】Dynamic Route Segmentsでパラメータを受け取る際、Promiseになってた話
Next.jsのAPI実装中、App RouterにおけるDynamic routesを使用したパラメータの受け取りに置いて型がPromiseに変更されている点、それに伴いawaitを使用する必要がある点について書置きします。
まず、App RouterでのAPI RoutesはPagesと構造が変わっているので、書き方を見ていきましょう。
今回は例としてイベント情報を取得するAPIを作成するものとして話を進めていきます。一般的なディレクトリ構造としては、src/app/api/event/route.ts で、IDをパラメータとしたDynamic routesを使用する場合はsrc/app/api/event/[id]/route.tsとなります。
各HTTPリクエストメソッドの名前を付けることでそれぞれ実装できます。
// GET /api/events - イベント一覧を取得
export async function GET() {
//処理を記述
}
第一引数にはrequestがきますが、必要ない場合は上記のように省略可能です。
ですが、パラメータの値を取りたい場合は省略できません。第一引数にrequest、第二引数にparamsを取ります。
// GET /api/events/[id] - イベント詳細を取得
export function GET(request: NextRequest, { params }: { params: { id: string } }) {
//処理を記述
}
これでも処理自体は通るのですが、型が違うと警告されます。
そこでいろいろDocsを見てみたところ、下記に記載がありました。
現在は後方互換性のため動きますが、将来的に廃止される予定なので覚えておきましょう。
今回はAPI Routesで発見しましたが、Dynamic Routesを使用するすべての箇所で同じ仕様に変わっているようです。
これを踏まえて書き換えると、このようになります。またparamsがPromiseであることから、awaitで値を受け取る必要があります。
// GET /api/events/[id] - イベント詳細を取得
export async function GET(
_: NextRequest,
{ params }: { params: Promise<{ id: string }> },
) {
const { id } = await params;
//処理を記述
}
また豆知識になりますが、第二引数のparamsは使いたいが第一引数のrequestは使わない場合、そのままrequest: NextRequestを書くとコードエディタ上ですっと警告が表示されてしまいます。そこで、_: NextRequestと、"_"を書くことで使用しないことを明示することが出来ます。
Discussion