reactjsnext.jsgetserversidepropsgetstaticprops

Next.js test of using static and serverside props requires that I check for component props Object not null

I created a project to get familiar with Next.js getStaticProps and getServerSide props. I have a simple component that renders a table row based on user data. I haven't been able to detect a time when the object was null, but if I don't check for null, I can't pass the build. The pages work without error, but the build fails unless I check for null on the user object passed to the UserRow component.

 if (props.user && props.user.id) {
    const { id, name, email } = props.user;
    return (
      <tr>
        <td>{id}</td>
        <td>{name}</td>
        <td>{email}</td>
      </tr>
    );
  } else {
    return <p>no data</p>;
  }

I'd like to understand why this null check is required for the build to be successful.

code: https://github.com/rebeccapeltz/demo-next-static-serverside

code deployed: https://demo-next-static-serverside.netlify.app/

Solution

  • TL;DR

    since the data is being fetched form an external API, essentially an untyped area, it may return null also, hence it requires a null check.