NextJs : Your `getStaticProps` function did not return an object-CodePudding

I am making a web application with NextJs. In the page I need to fetch an api to get data and display it. But it compiles I have got an error.

The error is : Error: Your `getStaticProps` function did not return an object. Did you forget to add a `return`?

And there is my function :

export async function getStaticProps(context) {
    try {
      const res = await fetch(ApiLinks.players.all)
        .then((response) => response.json())
        .then((response) => response.data.teamMembers)
  
        const responsePlayers = res.players;
        const responseStaff = res.staff;

        return {
            props: {
                responsePlayers,
                responseStaff,
            }
        }
    } catch (err) {
      console.error(err);
    }
  }

CodePudding user response：

It's because getStaticProps must return props it's better to add try-catch outside of it, so props can have data or not :

sth like this :

export async function getStaticProps(context) {
  let props = {};
  try {
    const res = await fetch(ApiLinks.players.all)
      .then(response => response.json())
      .then(response => response.data.teamMembers);

    const responsePlayers = res.players;
    const responseStaff = res.staff;
    props = {
      responsePlayers,
      responseStaff,
    };
  } catch (err) {
    console.error(err);
  }

  return {
    props,
  };
}

CodePudding user response：

It looks like the issue is that you are not returning an object from the getStaticProps function if the fetch call fails and an error is thrown. When an error is thrown in the try block, the catch block is executed, but the catch block does not return anything. As a result, the getStaticProps function does not return an object, which is causing the error.

To fix this, you can add a return statement at the end of the getStaticProps function to return an object with default values if an error occurs. Here is an example of how you can do this:

export async function getStaticProps(context) {
  try {
    const res = await fetch(ApiLinks.players.all)
      .then((response) => response.json())
      .then((response) => response.data.teamMembers)

      const responsePlayers = res.players;
      const responseStaff = res.staff;

      return {
          props: {
              responsePlayers,
              responseStaff,
          }
      }
  } catch (err) {
    console.error(err);

    // Return an object with default values if an error occurs
    return {
      props: {
        responsePlayers: [],
        responseStaff: [],
      }
    };
  }
}

Alternatively, you can use the try and catch keywords to handle the error and return an object with default values inside the catch block. Here is an example of how you can do this:

export async function getStaticProps(context) {
  try {
    const res = await fetch(ApiLinks.players.all)
      .then((response) => response.json())
      .then((response) => response.data.teamMembers)

      const responsePlayers = res.players;
      const responseStaff = res.staff;

      return {
          props: {
              responsePlayers,
              responseStaff,
          }
      }
  } catch (err) {
    console.error(err);

    // Handle the error and return an object with default values
    return {
      props: {
        responsePlayers: [],
        responseStaff: [],
      }
    };
  }
}

CodePudding user response：

Your function seems to be fine. Just check by console log whether both of the responsePlayers and responseStaff are object or not and if not try returning then like this :

return{
   props:{
      responsePlayers:responsePlayers,
      responseStaff:responseStaff
   }
}

also add this in the catch

return{
     props:null
}

and check if props is null or not in the above component.