Undefined return value from getStaticProps

Question

The value being returned from my getStaticProps in nextjs is undefined. I tried fetching data from a graphql endpoint and the return value was undefined when I console.log the value. This is the code block


const graphQuery = new GraphQLClient(url);

export const getStaticProps = async () => {
  const { course } = await graphQuery.request(QUERY);

  return {
    props: {
      course,
    }
  };
};

const CourseList = ({ course }) => {
 console.log("course > ", course);

 return (
  <>
  <div></div>
  </>
 )

};
export default CourseList;

I also tried just declaring a value in getStaticProps and returning it but it still shows undefined when i console log


const graphQuery = new GraphQLClient(url);

export const getStaticProps = async () => {
  const course = "Mathematics";

  return {
    props: {
      course,
    }
  };
};

const CourseList = ({ course }) => {
 console.log("course > ", course);

 return (
  <>
  <div></div>
  </>
 )

};
export default CourseList;

I've run this exact code block on a separate nextjs project and it worked so I'm wondering if something has changed with getStaticProps.

score 0 · Answer 1 · edited Aug 20 '23 at 14:43

Ok so I found out what was wrong for me, and I assume you too.

getStaticProps does not work when you use the app router; it only works with the pages router. When using the app router, everything inside the app directory gets preloaded, so you should be able to do

const CourseList = async () => {
    const course = await graphQuery.request(QUERY);
    console.log("course > ", course);

    return (
      <>
      <div></div>
      </>
   )
};

export default CourseList;

As long as your CourseList is inside the app directory, it should all be rendered server side

Undefined return value from getStaticProps

1 Answers1