Next.js × VercelでDynamic Routesが動かない時の対処法：generateStaticParamsを使った解決例

はじめに

Next.js プロジェクトを Vercel にデプロイした際に、ローカル環境では問題なく動作していたコードがエラーを引き起こす問題に直面しました
エラーログを確認すると、Dynamic Routes で fs モジュールにアクセスする箇所でエラーが発生していることがわかりました
この問題を解消するために色々と調査を行った結果、generateStaticParams 関数を使用することで解決できることが判明しました
この記事では、その解決方法について書きたいと思います

generateStaticParams 関数について

Dynamic Routes は、ユーザーが特定の URL にアクセスした際に、サーバーサイドでデータを取得し、ページを生成します
しかし、Dynamic Routes で生成するページに対して、generateStaticParams 関数を使用することで、ビルド時にページを生成することができます
これにより、URL アクセス時のエラーを回避することができました

• 参考
  • https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#generating-static-params
  • https://nextjs.org/docs/app/api-reference/functions/generate-static-params

generateStaticParams 関数 × Dynamic Routes

私の場合、app/blog/[slug]/page.tsx で fs モジュールにアクセスし、ページを生成する際にエラーが発生していました
そのため、generateStaticParams 関数で slug パラメータを渡すようにすることで、エラーを解消しました

以下が実際のコードです

// app/blog/[slug]/page.tsx

export function generateStaticParams() {
  const files = getBlogFiles()
  const slugs = files.map((fileName) => fileName.replace(/\.md$/, ''))

  return slugs.map((slug) => ({
    slug: slug,
  }))
}

export default function Blog({ params }: { params: { slug: string } }) {
  return <BlogPage slug={params.slug} />
}

おわりに

generateStaticParams 関数を使用し、ビルド時にページを作成することでエラーを解消することができました
今回のエラーは、SSR や SSG などの理解が足りてなかったことによるものだと思いますので、これを機にもっと理解を深めていきたいです
この記事が他の方のお役に立てば幸いです

ここまでご覧いただきありがとうございました