getStaticProps возвращает пустой объект props

Я пытаюсь отобразить целевую страницу с помощью getStaticProps (Next.js), но она работает не так, как ожидалось. Вот моя составляющая:

import { GetStaticProps } from 'next'

const Brief = (props) => {

    console.log(JSON.stringify(props)) // returns an empty object
    return (
        <>
            {props[0]}
            {props[1]}
            {props[2]}
        </>
    )
}

export const getStaticProps: GetStaticProps = async (context) => {
    const WhatIUse = <div className="WhatIUse">What I use</div>

    const introduction = <div className="introduction">Introduction</div>

    const ContactInfo = <div className="ContactInfo">Where to find me</div>

    return {
        props: [introduction, WhatIUse, ContactInfo]
    }
}

export default Brief

Оператор регистрации показывает, что реквизит возвращается как пустой объект, в чем может быть проблема?


typescript next.js getstaticprops
person Somayyah Mohammed    schedule 09.02.2021    source источник
comment
Наверняка вы получаете сообщение об ошибке при попытке запустить это?   -  person juliomalves    schedule 09.02.2021
comment
Вовсе нет, я запускаю производственную сборку, и в консоли нет сообщений об ошибках, просто элементы не отображаются.   -  person Somayyah Mohammed    schedule 09.02.2021
comment
Вы должны запустить dev-сборку, чтобы убедиться, что вы видите все ошибки.   -  person juliomalves    schedule 09.02.2021

Ответы (1)


arrow_upward
0
arrow_downward

В этом подходе есть пара недостатков.

Во-первых, переменная props, возвращаемая в getStaticProps, должна быть объектом, содержащим значения, которые можно сериализовать как JSON. Вы пытаетесь передать массив, который содержит элементы JSX (несериализуемые).

Во-вторых, getStaticProps используется для получения данных для предварительного рендеринга, вы не должны генерировать JSX там, это будет сделано в самом компоненте.

Вот практический пример, основанный на вашем исходном коде:

const Brief = (props) => {
    console.log(props) // Will log props passed in `getStaticProps`

    return (
        <>
            <div className="WhatIUse">{props.data[0]}</div>
            <div className="introduction">{props.data[1]}</div>
            <div className="ContactInfo">{props.data[2]}</div>
        </>
    )
}

export const getStaticProps: GetStaticProps = async (context) => {
    const WhatIUse = 'What I use'
    const introduction = 'Introduction'
    const ContactInfo = 'Where to find me'

    return {
        props: {
            data: [introduction, WhatIUse, ContactInfo]
        }
    }
}

export default Brief
person juliomalves    schedule 09.02.2021