Problem fetching data in react using getStaticProps

Question

I'm currently trying to fetch some data in my Next.js project using the getStaticProps() function and I continue to get this error:

TypeError: Cannot read property 'map' of undefined

My code looks like this:

export const getStaticProps = async () => {
    const data = [
        {
            "id": 1,
            "question": "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
            "answer": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste magni at magnam placeat. Non, saepe?"
        },
        {
            "id": 2,
            "question": "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
            "answer": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste magni at magnam placeat. Non, saepe?"
        }
    ]
    return {
        props: {
            questions: data
        }
    }
}

export default function FAQ({ questions }) {
    return (
        <div className="p-8 grid bg-blanco" >
            <div className="grid place-content-center text-center mt-10 md:mt-0" >
                <h1 className="text-2xl text-gun-rose-700 font-bold" >¿Tiene preguntas? Mira aquí</h1>
                <h3 className="text-gun-rose-300 mt-4 max-w-2xl" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, suscipit. Aliquid molestias eveniet ullam? Dolores, minus? Perspiciatis neque voluptates iste!</h3>
            </div>
            {questions.map(q => (
                <div className="" key={q.id}>
                    <h3 className="">{q.question}</h3>
                    <p className="">{q.answer}</p>
                </div>
            ))}
        </div>
    )
}

Any guidence will be appreciated, thanks in advance :)

Answer 1

It could be an async issue where questions is not immediately available. Try with a null check at the start of questions.

export default function FAQ({ questions }) {
    return (
        <div className="p-8 grid bg-blanco" >
            <div className="grid place-content-center text-center mt-10 md:mt-0" >
                <h1 className="text-2xl text-gun-rose-700 font-bold" >¿Tiene preguntas? Mira aquí</h1>
                <h3 className="text-gun-rose-300 mt-4 max-w-2xl" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, suscipit. Aliquid molestias eveniet ullam? Dolores, minus? Perspiciatis neque voluptates iste!</h3>
            </div>
            {questions && questions.map(q => (
                <div className="" key={q.id}>
                    <h3 className="">{q.question}</h3>
                    <p className="">{q.answer}</p>
                </div>
            ))}
        </div>
    )
}

Edit 1:

The getStaticProps method can only be used on the top level component of a page as stated in the caveats

The fix is to move the getStaticProps method to the top level page component. I've demo'ed this in a sandbox as folder structures are so important, link here.