Page components

There are some specific requirements and "boilerplate" for creating a page component in corgi. While we suggest using the corgi CLI to create page components, this section will provide the information you need to gain a deeper understanding of them.

Homepage specifics

There are some specifics for the "home" page component of your project. Check out the homepage specifics below for details.

info

For clarity, the term "page component" here is not to be confused with Next.js' <Page> component. This refers to the default exports of JavaScript modules within the /src/pages/ directory.

A basic page component

Here's an example index.jsx file for a page component. We'll break it down in the following sections.

import { PageProvider } from "@local/context";
import { useLocale } from "@local/hooks";
import { setupPaths, setupProps } from "@local/utilities";

const LOCALE_FOLDER = "about";

const AboutPage = ({}) => {
  const { page, globals } = useLocale(LOCALE_FOLDER);

  return (
    <PageProvider page={LOCALE_FOLDER}>
      <header>
        <h1>{page.header.title}</h1>
        <p>{page.header.body}</p>
      </header>

      <main></main>
    </PageProvider>
  );
};

export const getStaticPaths = async () => setupPaths(LOCALE_FOLDER);
export const getStaticProps = async (ctx) => setupProps(ctx, LOCALE_FOLDER);

export default AboutPage;

As you can see, the component itself must be the default export of the JavaScript module. Let's break some of these pieces down so we can understand what we're looking at.

The LOCALE_FOLDER constant

The value bound to this constant must match the directory path of your page's locales folder. For example, if your homepage locale content lives in /src/locales/home/, then your LOCALE_FOLDER value must be "home". Likewise, if a nested page's content lives at /src/locales/work/advertising/, then your LOCALE_FOLDER value must be "work/advertising".

The LOCALE_FOLDER is used in many places within a top-level page component, as you can see above.

setupPaths and setupProps

These two functions are wrappers around Next.js' getStaticPaths and getStaticProps, respectively. These functions are abstracted away in corgi so that you don't have to be as concerned with the relatively complex setup of a page. Both of these functions must be imported into the page component, and subsequently exported as getStaticPaths and getStaticProps; passing in the LOCALE_FOLDER constant to each.

The useLocale hook

The useLocale hook is explained in detail in the useLocale hook documentation. What's relevant here, is that when setting up a top-level page component, you must pass the LOCALE_FOLDER string to the hook. Essentially, this acts as an initializer for the hook. Subsequent uses of the hook in other components do not require this step.

The <PageProvider> component

The PageProvider component is a wrapper around all page content. It expects a page prop, set to the string bound to LOCALE_FOLDER. This allows corgi to maintain a cache of your locale data, which allows for conveniences such as the use of the useLocale hook on any component within a page.

Homepage specifics

One of corgi's localization opinions is that it gives users of the default locale a nice, locale-free URL. For example, if your default locale is United States English ("en-us"), the homepage of your project will live at your-project.com, as opposed to your-project.com/en-us.

Because the "home" page component must live both at the project root and the dynamic [locale] root, we must abstract the actual homepage content away, into its own component that can be shared across both of these root (index.jsx) files. By default, corgi sets this content up within the /src/layouts/home/home-layout.jsx file. Consequently, all your homepage content must be built-out from within this component, rather than the page two homepage index.jsx components themselves.