Skip to main content

usePage Hook

The usePage hook provides the standard interface for getting a page from your Headless WordPress API. It also allows you to pass-in no arguments. When you do not pass arguments into usePage it will attempt to look at the URL params in order to determine how to get a page from your Headless WordPress API. In Next.js this means you will need to name your page file in a particular way in order to get the proper URL params. Below are the possible names that will work automatically with Faust.js:

  • [pageId].tsx
  • [...pageUri].tsx

Using the above names, Faust.js is able to apply the following logic to determine how to get a page from your Headless WordPress API:

  1. If pageId is found in the URL params, Faust.js makes a request to retrieve a page from WordPress by ID
  2. If pageUri is found in the URL params, Faust.js makes a request to retrieve a page from WordPress by URI

The following is an example of how to use the usePage hook with a pageUri:

/src/pages/[...pageUri].tsx
import { getNextStaticProps } from '@faustjs/next';
import { client } from 'client';

export default function Page() {
const { usePage } = client;
const page = usePage();

return (
<article>
<h1>{page?.title()}</h1>
<div dangerouslySetInnerHTML={{ __html: page?.content() }} />
</article>
);
}

The above code will also work with pageId and pageUri depending upon what URL scheme you want to use. You may also want to fetch a specific page. Doing that might look similar to the following:

import { getNextStaticProps } from '@faustjs/next';
import { GetStaticPropsContext } from 'next';
import { client, PageIdType } from 'client';

export default function Page() {
const { usePost } = client;
const page = usePage({
id: 'hello-world',
idType: PageIdType.SLUG,
});

return (
<article>
<h1>{page?.title()}</h1>
<div dangerouslySetInnerHTML={{ __html: page?.content() }} />
</article>
);
}