Next.js｜ダイナミックルート内で"generateStaticParams()"を使って"missing param"エラーが出る（output: 'export'の設定有）

Next.js App Routerでダイナミックルートの中で generateStaticParams() を使った時に、下記のエラーが出ることがあります。

Error: Page "/blog/[slug]/page" is missing param "/blog/***" in "generateStaticParams()", which is required with "output: export" config.

このエラーの詳細・原因・解決策を簡単にまとめておくので、どなたかの参考になれば幸いです！初めにそれぞれを端的に整理しておきます。

• 【概要】リクエストされたURLと対応する[slug]がgeneralStaticParams()の戻り値に設定されていない
• 【原因】generalStaticParams()のreturnが間違っている等
• 【解決策】returnの記述と[slug]のスペルミス等がないか確認

エラーの詳細

Error: Page "/blog/[slug]/page" is missing param "/blog/content-01" in "generateStaticParams()", which is required with "output: export" config.

まずSGを組む前提でnext.config.jsにoutput: exportを設定しているものとします。エラーとしては「/blog/content-01のリクエストにサーバーが応えようとしたが、それに対応するparamがgenerateStaticParams()で返されていないよ」と言っています。

おそらく、ダイナミックルートのルール通りにgenerateStaticParams()の戻り値が設定されていないのでエラーが出ている可能性があります。

エラーの原因・解決

おそらく下記のようなミスがあると思います。

generateStaticParams()の戻り値が正しくない

export async function generateStaticParams() {
  const articles = await getArticles()
  return articles.map( article => (
    {
      slu: article.slug
      // ダイナミックルートのセグメント（=`[slug]`）と同じプロパティになっていない
    }
  ))
}

export async function generateStaticParams() {
  const articles = await getArticles()
  return articles.map( article => (
    article.slug
    // `{slug: article.slug}`のようにslugをプロパティに持ったオブジェクトで返していない
  ))
}

とにかく、スペルミスをしているか、ドキュメントの指定通りの戻り値になっていないか、といった具合です。ちなみに筆者はsluf: article.slugとただのスペルミスでした(笑)。焦っていたのかgまで届かなかった...。

ダイナミックルートのセグメントの方が間違っている

app/
└── blog/
    └── [sluf]/
        └── page.tsx

このようにセグメント側のスペルミス等があっても同じエラーが出るので、こっちも確認してみましょう。

改めて確認すべきドキュメント

もしピンとこなければ、改めて下記の公式ドキュメントを参照すると解決できるかもしれません。

Dynamic Routes｜Next.js

今回の戻り値のミスの話はgenerateStaticParamsのAPIリファレンスの方が関連性が高いので、抜粋して書いておきますね！

generateStaticParams｜Next.js API Reference

Returns

generateStaticParams should return an array of objects where each object represents the populated dynamic segments of a single route.

Each property in the object is a dynamic segment to be filled in for the route.
The properties name is the segment's name, and the properties value is what that segment should be filled in with.

ダイナミックルートのセグメントに相当するオブジェクトを詰め込んだ配列で返してくださいね。と書かれていて、単純に[id]とSingle Dynamic Segmentで書かれた形式と、[category]/[product]のMultiple Dynamic Segments形式、[...slug]のCatch-all Dynamic Segment形式が、それぞれドキュメントに例が掲載されているのでチェックしてみてください。