Next.js 15でのparams非同期化への対応方法【App router】

概要

Next.js 15から、以下の動的APIが非同期化されました：

• params
• searchParams
• headers()
• cookies()
• draftMode()

これに伴い、これらのAPIの使用方法が変更されています。今回はparamsの非同期化への対応方法をご紹介します。

注意：一時的に同期的なアクセスも可能ですが、警告が表示されます。将来のバージョンでは完全に非同期化されるため、早めの対応が推奨されます。

デプロイ時に発生したエラー

Next.js 15へのアップグレード後、デプロイ時に以下のエラーが発生する場合があります：

Types of property 'params' are incompatible.
Type '{ resultId: string; }' is missing the following properties 
from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

Error: Command "npm run build" exited with 1

このエラーはparamsが非同期オブジェクトであることを正しく処理していないことが原因です。

エラー解消方法

方法1: 自動修正（公式コードモッドを使用）

Next.js 15では、公式のコードモッドを利用して非同期化への対応を自動化できます。

以下のコマンドを実行してください：

npx @next/codemod@canary upgrade latest

コードモッドは以下の作業を自動的に行います：

• 非同期化されたparamsの型定義を更新
• 必要な箇所にawaitを追加
• 非同期関数にasyncキーワードを付与

コード量が多い場合におすすめの方法です。

---

方法2: 手動修正

自動修正が難しい場合や細かい調整が必要な場合、以下の手順で対応できます。

１. paramsの型定義をPromise型に変更
型定義を以下のように変更します：

params: Promise<{ resultId: string }>;

２. 非同期処理をawaitで待機
非同期オブジェクトparamsを展開するためにawaitを使用します：

const { resultId } = await params;

使用例

以下は非同期化に対応したコンポーネントの例です：

// 非同期対応したコンポーネント
const ResultPage = async ({
  params,
}: {
  params: Promise<{ id: string }>; // Promiseを付与
}) => {
  const { id } = await params; // 非同期的にparamsを展開
  const result = await fetchUserData(id); // 非同期処理
  return (
    <div>
      <h1>ID: {id}</h1>
      <p>Result Data: {JSON.stringify(result)}</p>
    </div>
  );
};

export default ResultPage;

まとめ

Next.js 15の非同期化対応は、今後のバージョンでの変更を見据えた重要なアップデートです。公式コードモッドを利用することで効率的に対応できますが、必要に応じて手動で調整することも可能です！

参照リンク

• Next.js公式ドキュメント - Version 15へのアップグレード