[SOLVED] Error: Failed to collect page data for /[variable]

Published on Tuesday 2 May 2023

[SOLVED] Error: Failed to collect page data for /[variable]

If you encounter the error 'Failed to collect page data for /[variable]' when you deploy your Next.js app on Vercel, it means that your app is trying to generate a page for a dynamic route but it fails. Here's how I fixe this error.

If you encounter the error 'Failed to collect page data for /[variable]' when you deploy your Next.js app on Vercel, or simply run npm run build locally, it means that your npm is failing to generate a page for a dynamic route.

In particular, this is how the error looked like:

Error: A required parameter (variable) was not provided as a string received number in generateStaticParams for /[variable]
[...]
Build error occurred
Error: Failed to collect page data for /[variable]
[...]
Error: Command "npm run build" exited with 1

Solution

This was the wrong generateStaticParams (to be put /[variable]/page.tsx):

export const generateStaticParams = async () => {
  return Array.from(Array(20).keys()).map((value:number) => ({variable: value}));
}

Here I was passing value to variable as a number, while it was expected to be a string, as stated in the error message.

Therefore, I just added .toString() to convert the numeric value to the proper expected type.

export const generateStaticParams = async () => {
  return Array.from(Array(20).keys()).map((value:number) => ({variable: value}));
}

This solved the error. I hope this helps you too!