generateMetadataを使用して動的にURLを設定する際に出るエラーの対処法

はじめに

generateMetadataでURLを動的に設定するさいにエラーがでたので対処法をメモ書きレベルで残しておきます。

環境

• OS:Windows11
• 開発ツール：VSCode
• フレームワーク：Next.js 16.0.7
• 言語：React

やろうとしたこと

まずやろうとしたことは、WebサイトのSEO対策のためにgenerateMetadataを使用して、下記のようなソースで正規URLの設定を行おうとしました。
ポイントとしては、引数から動的に文字列を取得してURLに設定していることです。

// メタ情報設定
export async function generateMetadata(
  { params }: { params: { slug: string } }
): Promise<Metadata> {
  const canonical = `${PUBLIC_CATEGORY}/${params.slug}`;
  return {
    alternates: { canonical },
    openGraph: { url: canonical },
  };

今までのNext.jsではこのやり方で設定できたはずですが・・・。

起きた事象

実行したら、下記のようなエラーが起きました。

 Invalid source map. Only conformant source maps can be used to find the original code. Cause: Error: sourceMapURL could not be parsed

読んだ感じ、JSのコンパイル前とコンパイル後の対応関係を示すソースマップが無効ですよ～みたいなエラー内容と思われます。

対処方法

解決方法は単純で、引数のパラメータをawaitで取得するように修正しました。

// メタ情報設定
export async function generateMetadata(
  { params }: { params: { slug: string } }
): Promise<Metadata> {
  const { slug } = await params;　　// 追記
  const canonical = `${PUBLIC_CATEGORY}/${slug}`;
  return {
    alternates: { canonical },
    openGraph: { url: canonical },
  };
}

前のソースだとslugが取得できずにundefinedとなっていましたが、
awaitをつけて待機してあげる必要がありましたって感じですね。

Next.js 15 以降、ルーティングパラメータが非同期 (Promise) で渡されるようになったので、
paramsはawaitで取得しなきゃいけないですよ～っていう単純なエラーでした。

解決してよかったです。