Блог

Я пытаюсь извлечь данные из динамического маршрута. Я нахожусь на страницах/наука и техника/[поле].js и я использую getStaticPath с getStaticProps, как обычно, но по какой-то причине getStaticProps никогда не выполняются, и компонент никогда не отображается. ВЫПОЛНЯЕТСЯ только getStaticPath, и там все работает нормально, а затем просто останавливается.

 export const getStaticPaths = async () => {
       const results = await fetch('randomapi');
       const fields = await results.json();
       const paths = fields.map(field => ( { params: { field: field.name } } ) );
       console.log(paths) // EVERYTHING IS FINE HERE
       return { paths, fallback: false }
   }

export const getStaticProps = async ({params}) => {

    // NOTHING IN HERE GETS CALLED

    console.log('context: ', context)
    console.log('yo')
    const res = await fetch(`http://localhost:8080/api/v1/fields/computer-science`)
    const field = await res.json()
    console.log('field: ', field)
    return { props: {field: field} }

  
}

const Details = ({ field }) => {
    // NOTHING IN HERE GETS CALLED
    // render component blabla
}
export default Details;
 

И в итоге получается 404 страница. Я буквально понятия не имею, что происходит, потому что я без проблем делаю то же самое в других файлах. Нашел 0 человек в Интернете с той же проблемой.

Вопрос в основном в том, почему контекст выполнения не переходит от getStaticPaths к getStaticProps, как это обычно происходит?

Возвращаемые параметры paths должны соответствовать вашему динамическому пути маршрута: pages/posts/[name] . Вам нужно заменить field на name .

 const paths = fields.map(field => ( { params: { name: field.name } } ) );
 

Кроме того, убедитесь, что все ожидаемые пути правильно сгенерированы в вашем paths массиве, в том числе computer-science .