Use Static Generation with getStaticProps in Next.js with TypeScript

Next.js has two forms of pre-rendering: Static Generation and Server-side Rendering.

If the data required to render the page is available at build time ahead of a user’s request (e.g. a list of blogposts) it's possible to generate the whole page at a build time of the app to ensure the best performance & SEO.

In this quick lesson we're going to learn how to use getStaticProps in Next.js with TypeScript support to statically generate a list of blogposts from an external API.