Currently, my project involves using Strapi to develop a custom API and NextJs for the frontend. I am experimenting with utilizing getStaticPaths
to generate pages based on different categories. In Strapi, I have set up a collection for categories that is linked to my papers collection. Testing the API routes with Postman has been successful; however, NextJs throws an error when trying to access the getStaticPaths
route, which should be
http://localhost:3000/categories/1
. Instead, I encounter the following error message: Error: A required parameter (category) was not provided as a string in getStaticPaths for /categories/[category]
. I'm puzzled because I converted it to a string as recommended, so why isn't the error resolved? Keep in mind, I'm not an expert in NextJs.
If I manually enter the route in either Postman or my browser, it functions correctly, displaying the accurate JSON output. Yet, the console in Strapi confirms receiving the request, but this confirmation doesn't appear in the console when Next attempts to load the page, presumably because it's not reaching that stage.
How can I resolve the aforementioned error? I've spent days on this issue, and it's becoming quite frustrating!
// pages/categories/[category].js
function Category({ categories }) {
return (
<>
<h1>{categories.name}</h1>
<h2>{categories.papers.name}</h2>
</>
)
}
export async function getStaticPaths() {
const res = await fetch('http://localhost:1337/Categories')
const Categories = await res.json()
await console.log(Categories);
const paths = Categories.map((category) => ({
params: { id: category.id.toString() },
}))
return { paths, fallback: false }
}
export async function getStaticProps({ params }) {
// params contains the post `id`.
// If the route is like /posts/1, then params.id is 1
const res = await fetch(`http://localhost:1337/Categories/${params.id}`)
const categories = await res.json()
console.log(categories)
// Pass post data to the page via props
return { props: { categories } }
}
export default Category
The expected response for
http://localhost:1337/Categories/**${params.id}**
- which would ideally be 1, making the URL http://localhost:1337/Categories/1
{
"id": 2,
"name": "English",
"published_at": "2021-10-08T10:12:08.041Z",
"created_at": "2021-10-08T10:12:04.011Z",
"updated_at": "2021-10-08T10:12:08.061Z",
"papers": [
{
"id": 1,
"name": "2020 English Studies (Testing)",
"description": "# Testing",
"PDF_link": "/uploads/2020_hsc_english_studies_98eabce6e7.pdf",
"published_at": "2021-10-08T10:14:55.816Z",
"created_at": "2021-10-08T10:12:48.714Z",
"updated_at": "2021-10-08T10:14:55.835Z",
"Media_Upload": [
{
"id": 1,
"name": "2020-hsc-english-studies.pdf",
"alternativeText": "",
"caption": "",
"width": null,
"height": null,
"formats": null,
"hash": "2020_hsc_english_studies_98eabce6e7",
"ext": ".pdf",
"mime": "application/pdf",
"size": 4959.79,
"url": "/uploads/2020_hsc_english_studies_98eabce6e7.pdf",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"created_at": "2021-10-08T10:14:32.827Z",
"updated_at": "2021-10-08T10:14:32.847Z"
}
]
}
]
}