動的なAPIは非同期です

一部のAPIへの同期アクセスが現在警告を発生させる理由について、詳細をご覧ください。

この警告が発生した理由

コード内のどこかで、動的レンダリングをオプトインするAPIを使用しました。

動的なAPIは

ページ、レイアウト、メタデータAPI、およびルートハンドラーに提供されるparamsとsearchParamsプロパティ。
next/headersからのcookies()、draftMode()、およびheaders()

Next 15では、これらのAPIは非同期になりました。この点については、Next.js 15のアップグレードガイドで詳しく読むことができます。

たとえば、次のコードは警告を発します

function Page({ params }) {
  // direct access of `params.id`.
  return <p>ID: {params.id}</p>
}

これには、これらのAPIの戻り値を列挙すること（例：{...params}、またはObject.keys(params)）、または反復処理すること（例：[...headers()]、またはfor (const cookie of cookies())、または明示的にcookies()[Symbol.iterator]()）も含まれます。

修正方法

next-async-request-api コードモッドは、これらのケースの多くを自動的に修正できます。

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

コードモッドはすべてのケースをカバーできるわけではないため、一部のコードを手動で調整する必要がある場合があります。

警告がサーバー（例：ルートハンドラー、またはサーバーコンポーネント）で発生した場合、プロパティにアクセスするには動的APIをawaitする必要があります。

async function Page({ params }) {
  // asynchronous access of `params.id`.
  const { id } = await params
  return <p>ID: {id}</p>
}

警告が同期コンポーネント（例：クライアントコンポーネント）で発生した場合、PromiseをアンラップするにはまずReact.use()を使用する必要があります。

'use client'
import * as React from 'react'
 
function Page({ params }) {
  // asynchronous access of `params.id`.
  const { id } = React.use(params)
  return <p>ID: {id}</p>
}

移行できないケース

Next.jsのコードモッドが、コードモッドで移行できないものを見つけた場合、@next-codemod-errorというプレフィックスと推奨されるアクションが付いたコメントを残します。たとえば、この場合、cookies()の呼び出しを明示的にawaitし、関数をasyncに変更する必要があります。次に、関数の使用箇所を適切に`await`されるようにリファクタリングします。

export function MyCookiesComponent() {
  const c =
    /* @next-codemod-error Manually await this call and refactor the function to be async */
    cookies()
  return c.get('name')
}

コードモッドによって残された@next-codemod-errorで始まるコメントに対応しなかった場合、Next.jsは問題に対処することを強制するために、開発およびビルドの両方でエラーを発生させます。変更を確認し、コメントの提案に従ってください。必要な変更を加えてコメントを削除するか、コメントのプレフィックス@next-codemod-errorを@next-codemod-ignoreに置き換えることができます。アクションが必要ない場合は、コメントのプレフィックス@next-codemod-ignoreがビルドエラーを回避します。

- /* @next-codemod-error <suggested message> */
+ /* @next-codemod-ignore */

知っておくと良いこと:

Promiseを実際に値を使用するまで（awaitまたはReact.useのいずれかで）アンラップするのを遅らせることができます。これにより、Next.jsはより多くのページを静的にレンダリングできます。

動的なAPIは非同期です

この警告が発生した理由

修正方法

移行できないケース

リンターによる強制移行