Currently I am using Strapi to build out a custom API and NextJs for the front end, I am trying to use getStaticPaths to create pages based on categories. I have setup a categories collection with a relationship to my papers collection in Strapi and when using Postman to test API routes everything works great. However Next is giving me an error when I attempt to access the getStaticPaths route which should http://localhost:3000/categories/1 but instead I get the error Error: A required parameter (category) was not provided as a string in getStaticPaths for /categories/[category] currently my code looks like this below; However I am confused because I am converting it to a string which should fix the error correct? I am no pro at NextJs btw.

If I manually enter the route in either Postman or my browser it works correctly, responding with the correct json output. And the console for strapi also shows the sent request, However this does not appear in the console when Next tries to load the page I am guessing because it isn't getting that far.

How the F do I fix the above mentioned error I have been here for days and it is getting slightly annoying lol

// 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 correct response for http://localhost:1337/Categories/**${params.id}** - which should be 1 meaning the url is 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"
                }
            ]
        }
    ]
}

CodePudding user response：

Keys in params should correspond to your dynamic route name. You pass id key there, but your route is called /categories/[category] so you need to pass category key.

    const paths = Categories.map((category) => ({
      params: { category: category.id.toString() },
    }))

And in getStaticProps obviously also grab category from params.