getNextStaticProps

The getNextStaticProps function lets you build a static site with your WordPress data outside of the template hierarchy using Next.js file based pages. The function should be returned from getStaticProps.

Usage

The getNextStaticProps function accepts two arguments: the server side props context, and an object (type GetNextStaticPropsConfig which extends the GetNextServerSidePropsConfig type) with a Page key. This should be your Next.js page component or any object that contains the properties: query and variables.

Example:

export async function getStaticProps(context: GetStaticPropsContext) {
  return getNextStaticProps(context, {
    Page: MyPage,
  });
}

Faust uses MyPage passed via getNextStaticProps to fetch the data using the query and variables properties. If the Page does not have those properties then no queries will be performed.

This is merely a convenient way to fetch the page data while reusing the logic between components. If you are interested on how this is done you can review the source code here.

Config

Context Parameter

This is the same object that Next.js provides in getStaticProps. You can review the full list of parameters here.

GetNextStaticPropsConfig Parameter

The second argument of getNextStaticProps is of type GetNextStaticPropsConfig and accepts the following parameters:

• Page: The current page component. It can be any valid React Element with the following properties: query and variables.
• revalidate: The revalidate property is the amount in seconds after which a page re-generation can occur. By default, it is set to 900 seconds (15 minutes).
• props: The props object is any other key value pairs of properties where each value is received by the Page component.

Because the GetNextStaticPropsConfig type extends GetNextServerSidePropsConfig, it can also accept any other properties of the getNextServerSideProps.

getNextStaticProps Return Values

The getNextStaticProps function returns an object that is required by the getStaticProps function.