Pre-Generate Static Pages with Next.js

Next.js

Share this video with your friends

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.

Garrett

~ 3 years ago

For those following along with the code, the url for the breaking bad quotes does not work.

Brian

~ 3 years ago

Ha! The first thing I was going to try. Thanks Garrett.

Jon Meyers(instructor)

~ 3 years ago

Thanks for letting me know! Looks like the Breaking Bad Quote API is down 🙁 I have reached out to the maintainer to see if we can fix it 🤞

Regi Ellis

~ 2 years ago

Since this is just a simple example of using a fetch request in a next.js app...any quote api should be fine...I used https://zenquotes.io/api/today for the example