Pre-Generate Static Pages with Next.js

Jon Meyers
InstructorJon Meyers
Share this video with your friends

Social Share Links

Send Tweet
Published 3 years ago
Updated 3 years ago

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
Garrett
~ 3 years ago

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

Brian
Brian
~ 3 years ago

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

Jon Meyers
Jon Meyersinstructor
~ 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
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

Markdown supported.
Become a member to join the discussionEnroll Today