Next.js 15でのparamsの非同期化とその対応方法

Next.js × Vercel で NotionをCMSとしたブログアプリケーションを開発していたところ、Vercelへのデプロイで下記エラーとなりました。

Type error: Type ‘BlogPostPageProps’ does not satisfy the constraint ‘PageProps’.
Types of property ‘params’ are incompatible.
Type ‘{ slug: string; }’ is missing the following properties from type ‘Promise<any>’: then, catch, finally, [Symbol.toStringTag]

実際の画面はこんな感じ。

原因

結論としては、Next.js 15のリリースによりparamsが非同期化され、Promiseとして返される仕様に変更されたことが原因のようです。

非同期リクエストAPI（破壊的変更）: headers、cookies、params、searchParamsなどのリクエスト依存APIが非同期化され、これらのAPIは非同期関数内でawaitを使用して呼び出す必要があります。

https://nextjs.org/blog/next-15#async-request-apis-breaking-change を和訳

対応方法

paramsの型定義をPromise型に変更する

export type BlogPostPageProps = {
    params: Promise<{ slug: string }>;
}

「await」で Promise を解決

const { slug } = await params;

まとめ

教材をもとに開発を進めていて、その教材が最新バージョンに対応していなかったので適宜調べながら進めていたところ発生したエラーでした。

chatGPTにエラーの原因を聞いていたのですが、学習の期間制限があるのをすっかり忘れていた・・・。

Next.jsのバージョンによるエラーだと時がつければ早く解決できたものの、そこに気がつくまでに時間がかかってしまいました😇