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 following properties: ‘query’ and variables
.
export async function getStaticProps(context: GetStaticPropsContext) {
return getNextStaticProps(context, {
Page: MyPage,
});
}
Code language: JavaScript (javascript)
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 read the 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
andvariables
.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
: Theprops
object is any other key value pairs of properties where each value is received by thePage
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.