Quick start

The concept of pages lives at the very core of Alokai's CMS integrations. They organize your CMS components in structures, allowing you to fetch them with a single request and render in the Storefront. This guide will show you how to quickly create a simple page in your CMS using the readily-available Content Types provided by Alokai.

first page

Creating CMS page

The process of creating pages differs in every CMS. Select your platform from the tabs below and follow the associated guide.

To use the Live Preview feature, you need to run your project locally with yarn dev command.

How it works

Alokai Storefront comes with a built-in page component responsible for handling fully-dynamic CMS pages for you. First, it fetches data from the CMS based on the currently visited Storefront path (e.g. /example). Second, it renders components from componentsAboveFold and componentsBelowFold containers using the RenderCmsContent wrapper.

Dynamic page has by default two containers: componentsAboveFold and componentsBelowFold. They are used for performance optimization, allowing you to split your page into two parts: above and below the fold. This way, you can load only the necessary components at the beginning and lazy-load the rest as the user scrolls down. If you want, you can define more containers in your CMS and use them in the Storefront.

apps/storefront-unified-nextjs/app/[locale]/(cms)/[[...slug]]/page.tsx

import connectCmsPage from '@/components/cms/wrappers/connect-cms-page';
import RenderCmsContent from '@/components/cms/wrappers/render-cms-content';

export default connectCmsPage((props) => {
  const { page } = props;
  const { componentsAboveFold = [], componentsBelowFold = [] } = page;

  return (
    <>
      <RenderCmsContent item={componentsAboveFold} />
      <RenderCmsContent item={componentsBelowFold} />
    </>
  );
}, {
  getCmsPagePath(props) {
    return props.params.slug?.join('/') ?? '/';
  },
});

Since the component is already in place, there is no additional work required on the Storefront side. In the next chapter of the guide, you will create your first page entry. You will be able to preview it in the CMS dashboard while editing. After you publish the entry, your Storefront running on localhost will be able to render it.

Read also?

Congratulations! You've just created your first CMS page. Read the other guides to learn even more about building amazing things with our CMS integrations.