Photo by AltumCode on Unsplash
As mentioned here, Next.js officially supports TypeScript. Over time, several features have been added to allow you to avoid writing boilerplate code. One of the most useful is represented by InferGetServerSidePropsType and InferGetStaticPropsType.
These will automatically infer the types for your page component props coming from the getServerSideProps() or getStaticProps() function respectively. Although they undoubtedly represent a time-saving feature, InferGetServerSidePropsType and InferGetStaticPropsType come with a few limitations preventing them from correctly inferring the props types, leading to a props: never error.
Let's now see how to use InferGetServerSidePropsType and InferGetStaticPropsType, and avoid those limitations.
InferGetServerSidePropsType and InferGetStaticPropsType in Action
Let's see how InferGetServerSidePropsType works with an example:
As you can see, InferGetServerSidePropsType allows you to avoid declaring the UserPage component user prop as User. Without InferGetServerSidePropsType, this is what the UserPage function signature would look like:
This last approach clearly involves code repetition, boilerplate code, and it makes your entire codebase less maintainable.
Keep in mind that InferGetServerSidePropsType works with getServerSideProps(). Likewise, InferGetStaticPropsType works with getStaticProps(). Their use and functioning are practically the same. So, an example to show InferGetStaticPropsType in action is not required.
Type Inference Issues Solved with infer-next-props-type
Type inference is great and in some cases may even seem like magic. On the other hand, it involves complex procedures that may easily fail. At the time of writing, in Next.js ≤ 12, both InferGetServerSidePropsType and InferGetStaticPropsType have a few major issues leading to Next.js infer never as props type. Follow this link if you want to learn more about it.
Such limitations can become a problem and prevent you from using them entirely. This is especially true considering that the inferring process fail also when using notFound. As stated here in the official documentation, notFound is an optional boolean that will force Next.js to redirect to the 404 page. Here is an example of how it works:
In this case, when the data retrieving logic fails, the notFound boolean is returned and the 404 page is loaded as a result.
Whenever this logic is used, InferGetServerSidePropsType and InferGetStaticPropsType fail and return never as props type. In other words, this basic and common error handling logic makes InferGetServerSidePropsType and InferGetStaticPropsType not working and therefore not employable.
Fortunately, the HaNdTriX GitHub user released a fix with the infer-next-props-type npm TypeScript library. As described here, using it is very simple. All you have to do is import it with the following line:
import InferNextPropsType from "infer-next-props-type"
And use it as follows:
So, all you have to do is replace InferGetServerSidePropsType or InferGetStaticPropsType with InferNextPropsType. In fact, that library supports getServerSideProps() and getStaticProps() indistinctly with the same InferNextPropsType type.
Read this to find the list of all the cases that cause the standard Next.js inferring process to fail addressed by this library.
Conclusion
In this article, we learned how to properly use type inference in Next.js and TypeScript. Next.js comes with a few features to avoid boilerplate code and make your life easier when developing in TypeScript, InferGetServerSidePropsType and InferGetStaticPropsType. This is great, but it does involve a few serious limitations that prevent you from using those features. Luckily, the community has taken steps to fix the most problematic issues, and learning everything about this was what this article was about.
Thanks for reading! I hope that you found this article helpful.
