javascript - NextJs & Strapi 使用 getStaticPaths 错误

问题描述

目前我正在使用 Strapi 为前端构建自定义 API 和 NextJs，我正在尝试使用它getStaticPaths来创建基于类别的页面。我已经在 Strapi 中设置了一个与我的论文集合相关的类别集合，并且在使用 Postman 测试 API 路由时一切正常。但是，当我尝试访问getStaticPaths应该的路线时，Next 给了我一个错误，http://localhost:3000/categories/1但我得到了错误，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"
                }
            ]
        }
    ]
}

标签： javascriptapinext.jsstrapi

输入的键params应与您的动态路由名称相对应。您在那里传递id密钥，但您的路线被调用/categories/[category]，因此您需要传递category密钥。

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

javascript - NextJs & Strapi 使用 getStaticPaths 错误

问题描述

解决方案

推荐阅读