Next.js 15で「Next.js＋ヘッドレスCMSではじめる！ かんたんモダンWebサイト制作入門」を進めた場合のデプロイエラーの対処方法

はじめに

chapter8で、さあいざVercelへデプロイだ！となったところでエラーが出てデプロイが失敗する場合の対処方法です。
そういえばNext.js 15で進めていたんだった！

エラー内容

Vercelでは、以下のようなエラーが表示されデプロイが失敗します。

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]
Next.js build worker exited with code: 1 and signal: null
Error: Command "npm run build" exited with 1

ターミナルでは、以下のようなエラーが続きます。

Error: Route "/news/[slug]" used `searchParams.dk`. `searchParams` should be awaited before using its properties

原因

Next.js 15からparamsやsearchParamsが非同期化されました。
そのため型定義（type Props）をPromise型に修正する必要があり、
また、paramsやsearchParamsはawaitを使って値を取得する必要があります。

対処方法

以下のように、該当するページのコードをすべて修正します。

• params, searchParamsをPromise型に修正
• params, searchParamsをawaitで取得する

例）
/src/app/news/[slug]/page.tsx

修正前

type Props = {
  params: {
    slug: string;
  };
  searchParams: {
    dk?: string;
  };
};

export default async function Page({ params, searchParams }: Props) {
  const data = await getNewsDetail(params.slug, {
    draftKey: searchParams.dk,
  }).catch(notFound);

  return (
    <>
      <Article data={data} />
      <div className={styles.footer}>
        <ButtonLink href="/news">ニュース一覧へ</ButtonLink>
      </div>
    </>
  );
}

修正後

type Props = {
  params: Promise<{
    slug: string;
  }>;
  searchParams: Promise<{
    dk?: string;
  }>;
};

export default async function Page({ params, searchParams }: Props) {
  const { slug } = await params;
  const { dk } = await searchParams;
  const data = await getNewsDetail(slug, {
    draftKey: dk,
  }).catch(notFound);

  return (
    <>
      <Article data={data} />
      <div className={styles.footer}>
        <ButtonLink href="/news">ニュース一覧へ</ButtonLink>
      </div>
    </>
  );
}

参照リンク

Next.js 公式ドキュメント