I’m using this approach on params to be able to export static html files.
The doc say that is correct.
https://nextjs.org/docs/app/api-reference/functions/generate-static-params#all-paths-at-runtime
But when trying to build (npm run build), the error message is “Error: Page “/products/[id]” is missing “generateStaticParams()” so it cannot be used with “output: export” config.”
type Params = Promise<{ id: string }>
const ProductPage = async (props: { params: Params }) => {
const productId = (await props.params).id
return (
<div>
// content
</div>
)
}
export default ProductPage
export async function generateStaticParams() {
return []
}
I need to use “output: export” to generate static files.
Here is the package.json
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev -p 3003",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@material-design-icons/font": "^0.14.13",
"@material-design-icons/svg": "^0.14.13",
"@mui/icons-material": "^5.16.7",
"@mui/material": "^5.16.7",
"@mui/x-data-grid": "^7.15.0",
"@tailwindcss/typography": "^0.5.15",
"axios": "^1.7.6",
"crypto-js": "^4.2.0",
"js-cookie": "^3.0.5",
"material-icons": "^1.13.12",
"material-symbols": "^0.22.1",
"next": "^15.0.3",
"react": "^18",
"react-dom": "^18",
"react-markdown": "^9.0.1",
"react-toastify": "^10.0.6",
"remark-gfm": "^4.0.0",
"sass": "^1.77.8",
"swagger-ui-react": "^5.17.14"
},
"devDependencies": {
"@types/crypto-js": "^4.2.2",
"@types/js-cookie": "^3.0.6",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"@types/swagger-ui-react": "^4.18.3",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
}
I believe it’s because you are trying to generate a dynamic routes page without any product ids. Since, you have used output: export it requires all the dynamic pages to resolve their dynamic slugs or ids on build.
A possible fix can be
export async function generateStaticParams() {
// it will now know to generate /products/1 page
// As per docs, leaving this empty will only work for default output build
return [{id: "1"}]
}