Next.js - Infer Get Static Props Type

Posted on January 13, 2023

Next.js with Typescript - Does inferred typing defeat the purpose?

Next.js was release in 2016 by Vercel and has been growing in popularity over the past few years. I needed a portfolio website as an opportunity to learn Next.js with Typescript. Overrall, it has been a good experience but there have been a few times where the two felt counter-intuitive.

Last week I was going through a code review and while going over the Contact component, I explained to my colleague that I used InferGetStaticPropsType as a quick fix to avoid creating a type for the return props of getStaticProps. I did this because I was following an article I read to set up the component, not thinking about why I was doing what I was doing.

export  default  function  Contact({endpoint}: InferGetStaticPropsType<typeof  getStaticProps>)

He stopped me and asked "Doesn't that completely defeat the purpose of Typescript?" What he meant was, if the structure of the props were to ever change type-wise, it wouldn't get caught. I didn't have a great response.

Oh no! Don't I need to know everything?

One of my favorite things to do when learning some new tech is to call this colleague and just explain what I'm learning. He is very good at poking holes which makes me curious enough to investigate further.

  1. Explain process in code review
  2. Have colleagues poke holes when something doesn't add up
  3. Investigate why you don't have a good answer

InferGetStaticPropsType - so is it good or bad?

In the end, I use InferGetStaticPropsType to save on key strokes, but it does feel like more of a loophole around the TypeScript compiler. Feel free to reach out if you have any thoughts on this by visiting my contact page.

Thanks for reading!