Pre-Generate Static Pages with Next.js

In this lesson we will learn how to generate static pages at build time using the getStaticProps function in Next.js. This ensures that, in production, load times will stay fast as the data is already present on the page when a user navigates there.

We will build a Breaking Bad quote generator and learn the differences between running in development mode and production. The main difference being Next.js will re-build the page for you in development every time you visit it where a page only gets built once in production. This can lead to slightly different behaviors in dev vs production that you need to keep in mind.