getWordPressProps is a function that should be returned within Next.js’ getStaticProps or getServerSideProps to properly setup the Faust Template Hierarchy system.

Usage

To properly configure getWordPressProps, create pages/[...wordpressNode].js with the following content:

// In pages/[...wordpressNode].js

import { getWordPressProps, WordPressTemplate } from '@faustwp/core';

export default function Page(props) {
  return <WordPressTemplate {...props} />;
}

export function getStaticProps(ctx) {
  return getWordPressProps({ ctx });
}

export async function getStaticPaths() {
  return {
    paths: [],
    fallback: 'blocking',
  };
}

Code language: JavaScript (javascript)

NOTE
This above example uses getStaticProps, but you can also use getServerSideProps as they are both supported.

Configuration

Below is the getWordPressProps config object defined as a TypeScript type:

type GetWordPressPropsConfig<Props = Record<string, unknown>> = {
  /**
   * The Next.js getServerSideProps or getStaticProps context. This is required.
   */
  ctx: GetServerSidePropsContext | GetStaticPropsContext;
  /**
   * Any props you would like returned to the Faust templates
   */
  props?: Props;
  /**
   * The Next.js revalidate value. By default, Faust sets a smart default of 900 seconds (15 minutes)
   */
  revalidate?: number | boolean;
  /**
   * Provide extra parameters for the Page.variables function call.
   */
  extra?: Props;
};
Code language: PHP (php)

Passing Extra Arguments

Within the data fetching functions (getNextStaticProps, getServerSideProps, getWordPressProps), you can pass an object containing your desired extra data to the extra property of the options argument:

export function getStaticProps(ctx) {
  return getWordPressProps({ ctx, extra: { hello: 'world' } });
}
Code language: JavaScript (javascript)

Accessing Extra Arguments

Inside your component’s variables() function, you can access the passed extra arguments through the third parameter named extra. This will be an object containing the key-value pairs you provided:

Component.variables = ({ databaseId }, ctx, extra) => {
  console.log(extra); // {hello: 'world'}
  // Use the data from extra object
  ...
}Code language: JavaScript (javascript)