発生したエラー

package.json でNext.jsのバージョンを14.2.13から15.0.1に上げ、ビルドを行ったところ、以下のようなエラーが発生しました。

app/archive/[year]/[month]/page.tsx

Type error: Type 'Props' 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]

これは、params でのパラメーター取得がこれまで非同期である必要はありませんでしたが、Next.js 15からは非同期で行うように変更されたためです。そのため、props を Promise 型で定義する必要があるようです。

対処法

それでは対処法を紹介します。

手動で解消する方法もありますが、Next.jsから提供されているcodemodパッケージを使用すると自動で対処できるため、まずはそちらの方法を紹介します。

自動対処

次の npx コマンドを使ってcodemodを実行します。

npx @next/codemod@canary next-async-request-api .

このコマンドを実行することで、params に関するエラーが一気に解消されます。

手動対処

手動で対処する場合、型定義を Promise 型に変更し、パラメーターの取得を非同期で行うように設定します。

型定義は以下のように変更します。

// 変更前
type Props = {
  children: React.ReactNode;
  params: {
    year: string;
    month: string;
  };
};

// 変更後
type Props = {
  children: React.ReactNode;
  params: Promise<{
    year: string;
    month: string;
  }>;
};

そして、params の取得部分も非同期にし、await を付け足します。

// 変更前
const { year, month } = params;

// 変更後
const params = await props.params;
const { year, month } = params;

これで、params に関するエラーが解消されます。

最後に

ここまで、Next.js 15で発生する params エラーの解消法について紹介しました。

codemod を使うことで、簡単かつスムーズに移行することができました。ぜひ、安全にバージョンアップを行ってみてください。

ここまでお読みいただき、ありがとうございました。