NextJs getStaticPaths 未呈现适当的页面，显示 404 错误

Posted 2023-03-30

【中文标题】NextJs getStaticPaths 未呈现适当的页面，显示 404 错误

【英文标题】：NextJs getStaticPaths not rendering the appropiate page, shows 404 error

【发布时间】：2021-11-28 04:19:34

【问题描述】：

好吧，这可能是一个非常愚蠢的问题，但我以前从未使用过“getStaticPaths”，但对于这个项目，我也确实需要！

我在“getStaticPaths”上使用了 NextJs 的 documentation 的代码，当我前往应该是路由“http://localhost:3000/1”时，代码编译正确，但它返回 404 not found？我的自定义 API 是使用 Strapi 构建的。使用 Postman 时，它会返回带有 json 响应的 GET 请求，如下所示。

为什么这不起作用？我非常困惑，非常感谢您的帮助！

这也是一种将路线更改为“/Math”而不是“/1”的方法吗？

再次提前致谢！

        "id": 1,
        "name": "Math",
        "published_at": "2021-10-08T04:32:51.871Z",
        "created_at": "2021-10-08T04:32:50.777Z",
        "updated_at": "2021-10-08T04:32:51.883Z",
        "papers": [
            
                "id": 1,
                "name": "Maths Standard 2020 Past Papers 1",
                "description": "# 2020 Maths Standard Past Papers 1\n\nOriginal Source: [Source](https://educationstandards.nsw.edu.au/wps/portal/nesa/resource-finder/hsc-exam-papers/2020/mathematics-standard-2020-hsc-exam-pack)",
                "pdf_gcs_link": "https://storage.cloud.google.com/matsites/2020-hsc-mathematics-standard-1.pdf",
                "published_at": "2021-10-08T04:39:01.111Z",
                "created_at": "2021-10-08T04:38:49.013Z",
                "updated_at": "2021-10-08T05:21:32.293Z",
                "pdf": [
                    
                        "id": 1,
                        "name": "2020-hsc-mathematics-standard-1(1).pdf",
                        "alternativeText": "",
                        "caption": "",
                        "width": null,
                        "height": null,
                        "formats": null,
                        "hash": "2020_hsc_mathematics_standard_1_1_1e764b3f71",
                        "ext": ".pdf",
                        "mime": "application/pdf",
                        "size": 612.42,
                        "url": "/uploads/2020_hsc_mathematics_standard_1_1_1e764b3f71.pdf",
                        "previewUrl": null,
                        "provider": "local",
                        "provider_metadata": null,
                        "created_at": "2021-10-08T04:37:35.185Z",
                        "updated_at": "2021-10-08T04:37:35.192Z"
                    
                ]
            
        ]
    ,
    
        "id": 2,
        "name": "English",
        "published_at": "2021-10-08T04:32:59.966Z",
        "created_at": "2021-10-08T04:32:58.804Z",
        "updated_at": "2021-10-08T04:32:59.974Z",
        "papers": []
    
]

// pages/posts/[id].js

function Category( categories ) 
    <>
    <h1>categories.name</h1>
    </>
  
  
  export async function getStaticPaths() 
    const res = await fetch('http://localhost:1337/Categories')
    console.log(res);
    const categories = await res.json()
  
    const paths = categories.map((category) => (
      params:  id: category.id ,
    ))

    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()
  
    // Pass post data to the page via props
    return  props:  categories  
  
  
  export default Category
  

// categories response
Response 
  size: 0,
  timeout: 0,
  [Symbol(Body internals)]: 
    body: PassThrough 
      _readableState: [ReadableState],
      _events: [Object: null prototype],
      _eventsCount: 2,
      _maxListeners: undefined,
      _writableState: [WritableState],
      allowHalfOpen: true,
      [Symbol(kCapture)]: false,
      [Symbol(kCallback)]: null
    ,
    disturbed: false,
    error: null
  ,
  [Symbol(Response internals)]: 
    url: 'http://localhost:1337/Categories',
    status: 200,
    statusText: 'OK',
    headers: Headers  [Symbol(map)]: [Object: null prototype] ,
    counter: 0
  

【参考方案1】：

fetch 调用 getStaticProps 有错字，Categories 后面应该有一个斜杠：

const res = await fetch(`http://localhost:1337/Categories/$params.id`)

您可以通过在getStaticPaths 中将category.id 替换为category.name 来更改路线：

params:  id: category.name,

但是你必须在getStaticProps 和api 端点中修改你的fetch 调用。更好的方法是使用next.js rewrites

【讨论】：

好的，这很有帮助，但我遇到了另一个错误，error - Error: A required parameter (category) was not provided as a string in getStaticPaths for /categories/[category]

您收到此错误是因为 category.id 是 number 类型。您必须使用 category.id.toString() 将其转换为字符串。

即使将其转换为字符串仍然会出现相同的错误

控制台记录 categories in getStaticProps 得到我添加到帖子中的响应，这绝对不是应该的，通过邮递员发送该请求http://localhost:1337/Categories/1 接收低于它应该是什么@987654340 @

我认为你需要在控制台记录之前await 为json