NextJs 和 Strapi 使用 getStaticPaths 错误

Question

目前我正在使用 Strapi 为前端构建自定义 API 和 NextJs，我正在尝试使用 getStaticPaths 创建基于类别的页面。我在 Strapi 中设置了一个与我的论文集相关的类别集合，当使用 Postman 测试 API 路由时，一切都很好。但是，当我尝试访问应该 http://localhost:3000/categories/1 的 getStaticPaths 路由时，Next 给我一个错误，但我得到的错误是 Error: A required parameter (category) was not provided as a string in getStaticPaths for /categories/[category]，目前我的代码如下所示；但是我很困惑，因为我正在将它转换为应该修复错误的字符串？顺便说一句，我不是 NextJs 的专家。

如果我在 Postman 或我的浏览器中手动输入路线，它会正常工作，并以正确的 json 输出响应。 strapi 的控制台也显示了已发送的请求，但是当 Next 尝试加载我猜测的页面时，这不会出现在控制台中，因为它还没有那么远。

我怎么解决上面提到的错误我已经在这里好几天了，有点烦人哈哈

// 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

http://localhost:1337/Categories/**${params.id}** 的正确答案 - 应该是 1 表示 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"
                }
            ]
        }
    ]
}

Answer 1

params 中的键应与您的动态路由名称相对应。你在那里传递了 id 键，但是你的路由被称为 /categories/[category] 所以你需要传递 category 键。

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

并且在 getStaticProps 中显然也从参数中获取 category。

NextJs 和 Strapi 使用 getStaticPaths 错误

NextJs & Strapi using getStaticPaths error

javascript

api

strapi

next.js