How Modules work in Next.js

Follow

In Agility CMS, Modules are functional components Editors use to compose what type of content is on each page and in what order they appear.

Developers define what modules are available in the CMS and what fields they consist of. Each Module defined within Agility CMS should have a corresponding React Component in your Next.js site.

If modules are not defined, or the editor do not add modules to pages, then there won't be anything to output on your pages.

What is in a module?

A module in Agility CMS has a name, description, and fields.

The Name is a representation of the module's intended functionality, such as Posts Listing or Rich Text Area.

It is recommended that each module gets a description, this helps users understand when and where to use this definition.

Fields represent the content that can be managed by editors within the module. These fields are then used in code (passed as props) to display the content the editor intended.

Learn how to How to Create a Module definition.

An Example

In our agilitycms-next-starter site, the name of the module is used to find a corresponding react component that matches with the same name. If there is a match, then that component will be dynamically imported and rendered for you.

For example, if a module has the name of RichTextArea in the CMS, while Next.js is rendering your pages, it will look for ./components/agility-modules/RichTextArea.js inside of the ./components/agility-modules directory.

Screen_Shot_2020-09-28_at_10.30.02_AM.png

The <ContentZone /> component will dynamically import the module and pass all the field values for the module as fields in the props.

import React from "react";
import { renderHTML } from "agility/utils";
import tw from "twin.macro";

import { Container, ContentWithPaddingLg } from "components/misc/Layouts";
export const RichText = tw.div`prose prose-sm sm:prose lg:prose-lg xl:prose-xl`;

export default (props) => {
  return (
    <Container>
      <ContentWithPaddingLg>
        <RichText
          className="prose"
          dangerouslySetInnerHTML={renderHTML(props.fields.textblob)}
        ></RichText>
      </ContentWithPaddingLg>
    </Container>     
  );
};

How to Add a new Module

If you create a new module within Agility CMS, you'll want to create the corresponding React component for it within the ./components/agility-modules directory.

If there is no React component for your module, then nothing can be rendered for it in your Next.js site.

How to Change the Fields

You can alter your fields at any time and they fields values passed to your component will update automatically the next time you run another build.

The most popular and most used Definition Fields are defined below.

Text - How to Add a Text Field Type

Image - How to Add an Image Field Type

HTML - How to Add a HTML Field Type

1 out of 1 found this helpful

Comments

0 comments

Please sign in to leave a comment.