How to create pages in React accelerator

React accelerator comes with built-in page templates and page components to render them. They are built based on NextJS's File conventions and routing, with a Middleware to forward requests to the right template's files. Accelerator comes with a set of pre-defined page templates. For each template, we should have a file /app/{TEMPLATE_ID}{TEMPLATE_TYPE}/[[...slug]]/page.tsx to handle requests. Where {TEMPLATE_ID} should be replaced by the Id of the template, and {TEMPLATE_TYPE} is its type. For example:

1. Page templates: app/HomePage/[[...slug]]/page.tsx for Home page template.
2. Category template: app/CategoryProductCategory/[[...slug]]/page.tsx for CategoryProduct category template.
3. Product template: app/ProductWithVariantsListProduct/[[...slug]]/page.tsx for ProductWithVariantsList product template.

Wondering about [[...slug]]? It is called Option catch-all segment.

In this article, we will create a new Page template and create a component to render its content.

Create a Contact us page template

The field templates for the Websites area can be found in backoffice, Settings > Websites > Field templates. Clicking on the New button should open a dialog to add new field template. Fill in Page for Type, and ContactUs for Id. Note this Id value as we need it later to create a folder for page.tsx file.

Switching to Fields tab, we should add a Field to this template so we can get its data and render it. Let's try with a simple Text field, whose Id is Text.

Create a Contact us page

Create a new page under Home page, where its name is Contact us and its page template is the ContactUs template we recently created. Fill in the text and publish the page.

Create page component

Following the folder name convention above, we should have a file app/ContactUsPage/[[...slug]]/page.tsx where its content should be:

import { gql } from '@apollo/client';
import { Metadata } from 'next';
import { headers } from 'next/headers';
import { queryWithHeader } from 'services/dataService';
import { createMetadataFromUrl } from 'services/metadataService';

export default async function Page({ params }: { params: any }) {
  const content = await getContent({ params });
  return <div dangerouslySetInnerHTML={{ __html: content.fields.text }}></div>;
}

async function getContent({ params }: { params: any }) {
  return (
  await queryWithHeader({
    query: GET_CONTENT,
    url: params.slug?.join('/') ?? '/',
    headers: headers(),
  })
  ).content;
}

const GET_CONTENT = gql`
  query GetContent {
  content {
    ... on ContactUsPage {
    fields {
      text
    }
    }
  }
  }
`;

export async function generateMetadata({
  params,
}: {
  params: any;
}): Promise<Metadata> {
  return await createMetadataFromUrl(params.slug?.join('/'), headers());
}

What the code above does is:

• Fetches the Text field data by invoking the getContent function, which sends a GraphQL query to the server.
• Renders the Text field as raw HTML. For more info regarding dangerously settings the inner HTML.
• Generates and returns Metadata.

Now, assuming we have created a Contact us page with /contact-us as the Url, opening https://localhost:3001/contact-us should render the page.

Related

• How to create blocks in the React accelerator