getStaticProps Does not return any data to the pages on Next.JS

Question

I'm trying to fetch a data from my hosted database. The database itself are working (I have checked it from the swagger app) but no data is shown when it is called from API form.

import React from 'react';

export const getStaticPaths = async () => {
    const res = await fetch('https://[server]/course');
    const data = await res.json();

    const paths = data.result.map(course => {
        return {
            params: { id: course._id.toString() }
        }
    })

    return {
        paths,
        fallback: false
    }
}

export const getStaticProps = async (context) => {
    const id = context.params.id;
    const res = await fetch('https://[server]/course/' + id);
    const data = await res.json();

    return {
        props: { course: data }
    }
}

const Details = ({ course }) => {
    return (
        <div>
            <h1> { course.course_name } </h1>
            <h1>a</h1>

        </div>
    );
}
 
export default Details;

The code is in the pages folder. I followed a tutorial on youtube from "netninja" and when I tried it on his code it works. I read somewhere that it won't work on components but I already put it on the pages but it still does not return anything.

Is there anything I can do ?

Answer 1

I got the answer. After checking console.log on the data. Looks like the data is on another array which is called result. so i needed to call the data from course.result.course_name. So the Answer is just to check console.log every once in a while. Shout out to juliomalves for pointing that out