はじめに

開発環境では、動作、デバッグ等問題ありませんでしたが、Vercelへデプロイする際に「Error: React Hook～」というエラーによりビルドが失敗していました。

エラー概要

Vercelのビルドログを確認すると以下のようなエラーメッセージが出力されていました。

Type error: Route has an invalid export:
Type "{ params: { id: string; }; }" is not a valid type for the function’s second argument.

Next.js 15では、Route HandlersのparamsがPromiseオブジェクトになったため「Type error」と出ていた模様です。

対策

以下対策です。

・Route HandlersのparamsをPromiseオブジェクトとして定義
・paramsをawaitして取得

①エラーの記述

export async function DELETE(
  req: NextRequest, 
  { params }: { params: { id: string } }
) {
　const id = parseInt(params.id);

  ~~~~~~~~~~~~~~~
}

②修正後の記述

「params」をPromiseオブジェクトとして定義しています。
また、「params」をメソッド内で使用する際は「await」を使用しています。

export async function DELETE(
  req: NextRequest, 
  { params }: { params: Promise<{ id: string }> }
) {
　const id = parseInt((await params).id);

  ~~~~~~~~~~~~~~~
}

まとめ

・Route HandlersのparamsをPromiseオブジェクトとして定義
・paramsをawaitして取得

Next.js 15になり、仕様が変わったところがありますが、順次対応していきながらNext.jsライフを楽しめたらと思います。

参考

ありがとうございました。

・Next.js Route Handlers ドキュメント

・Next.js 15で変更されたRoute Handlersのパラメータ処理について

Let's share!