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/
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.