Блог

В настоящее время я использую Strapi для создания пользовательского API и NextJS для интерфейса, который я пытаюсь использовать getStaticPaths для создания страниц на основе категорий. Я настроил коллекцию категорий, связанную с моей коллекцией документов в Strapi, и при использовании Postman для тестирования маршрутов API все работает отлично. Однако далее появляется ошибка, когда я пытаюсь получить доступ к getStaticPaths маршруту, который должен http://localhost:3000/categories/1 , но вместо этого я получаю ошибку Error: A required parameter (category) was not provided as a string in getStaticPaths for /categories/[category] , в настоящее время мой код выглядит так, как показано ниже; Однако я в замешательстве, потому что я преобразую его в строку, которая должна исправить ошибку правильно? Кстати, я не профессионал в NextJS.

Если я вручную введу маршрут либо в Postman, либо в своем браузере, он будет работать правильно, отвечая правильным выводом json. И консоль для страпи также показывает отправленный запрос, однако он не отображается в консоли при следующей попытке загрузить страницу, я предполагаю, потому что она не заходит так далеко.

Как, черт возьми, я могу исправить вышеупомянутую ошибку, я был здесь в течение нескольких дней, и это становится немного раздражающим, лол

 // 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"
                }
            ]
        }
    ]
}
 

Ввод ключей params должен соответствовать названию вашего динамического маршрута. Вы передаете id ключ там, но ваш маршрут называется /categories/[category] так, что вам нужно передать category ключ.

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

И, getStaticProps очевидно, также хватайте category из парамов.