Static generation with a third-party data source

Next.js has a getStaticProps data fetching method that allows us to load data at build time, which will be passed to a page.

The following sequence diagram illustrate what this involves:

Figure 5.8: A sequence diagram of Next.js pre-rendering using getStaticProps

For example, if we want to build a “product list” page based on fakestoreapi.com data, we can write the following getStaticProps method in a pages/products/index.js page:

export async function getStaticProps() {
  const products = await fetch
    ('https://fakestoreapi.com/products').then(
    (res) => res.json()
  );
  return {
    props: {
      products,
    },
  };
}

Here’s a product example in the response to illustrate the data shape:

{
  ...