Блог

Ладно, это может быть очень глупый вопрос, но я никогда раньше не использовал «getStaticPaths», но для этого проекта мне тоже очень нужно!

Я использовал код документации NextJS по «getStaticPaths», и пока код правильно компилируется, когда я направляюсь к тому, что должно быть маршрутом ‘http://localhost:3000/1″ он возвращает 404 не найден? Мой пользовательский API построен с использованием Strapi. При использовании Postman он возвращает запрос GET с ответом json, как показано ниже.

Почему это не работает? Я крайне смущен, и некоторая помощь была бы чрезвычайно признательна!!

Также есть ли у них способ изменить маршрут на «/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 1nnOriginal 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
  }
}
 

В fetch вызове есть опечатка getStaticProps , после этого должна быть прямая косая черта Categories :

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

Вы можете изменить маршрут, заменив category.id его на category.name in getStaticPaths :

 params: { id: category.name},
 

Но тогда вам придется изменить свой fetch вызов getStaticProps и api конечную точку. Лучшим подходом было бы использовать next.js переписывает