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
These will automatically infer the types for your page component props coming from the
getStaticProps() function respectively. Although they undoubtedly represent a time-saving feature,
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
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
user prop as
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
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
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,
InferGetStaticPropsType fail and return
never as props type. In other words, this basic and common error handling logic makes
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
InferNextPropsType. In fact, that library supports
getStaticProps() indistinctly with the same
Read this to find the list of all the cases that cause the standard Next.js inferring process to fail addressed by this library.
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,
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.