How Pages Templates work in Next.js

Page Templates in Agility CMS allow developers to differentiate the styles of certain types of pages, and also define where on the page editors can add and edit Modules (functional components of the page that editors can control).

Depending on your scenario, some sites may only use a single page template and re-use it across the site, while other sites may have multiple templates to allow for more flexible layouts.

What is in a Page Template?

When editors create pages in Agility CMS, they must select which template they'd like to use.

A Page Template consists of a Name and Content Zones.

The Name should represent what the editor can expect from using the Page Template. For example, a site may have templates named One Column Template, Two Column Template, or Blog Template.

A Content Zone is an area defined in the Page Template where an editor can add, edit, or remove modules. A Page Template can have one or many Content Zones.

Learn how to Create Page Templates

An Example

In the agilitycms-nextjs-starter site, the Name of the Page Template is used to find the corresponding react component that matches the same name. If a match is found, that component will be dynamically imported and rendered for you.

For example, if a Page Template has the name of Main Template in the CMS, while the page is being rendered, it will look for ./components/agility-pageTemplates/MainTemplate.js inside of the ./components/agility-pageTemplates directory.

Taking a look at the Layout.js file from our agilitycms-nextjs-starter site, the <AgilityPageTemplate /> component will automatically take care of resolving and rendering the appropriate Page Template 


From ./components/common/Layout.js:

const AgilityPageTemplate = getPageTemplate(pageTemplateName);

From ./components/agility-pageTemplates/mainTemplate.js:

import React from "react";
import { ContentZone } from "@agility/nextjs";
import { getModule } from "components/agility-pageModules";

const MainTemplate = (props) => {
  return (
    <ContentZone name="MainContentZone" {...props} getModule={getModule} />

export default MainTemplate;

How to Add a New Page Template

When you create a new Page Template within Agility CMS, you'll want to create the corresponding React component for it within the ./components/agility-pageTemplates directory.

All of the Page Templates that are being used within the site need to be imported into the index file within the ./components/agility-pageTemplates directory and added allTemplates array:

import MainTemplate from "./MainTemplate";

// All of the Agility Page Template Components that are in use in this site need to be imported into this index file.
// Place Page Templates in allTemplates array below, passing in a name and the component.

const allTemplates = [
{ name: "MainTemplate", template: MainTemplate }
]; export const getPageTemplate = (templateName) => { if (!templateName) return null; const obj = allTemplates.find( (m) => === templateName.toLowerCase() ); if (!obj) return null; return obj?.template; };

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

How to Add a Content Zone

You can alter your content zones at any time, simply import ContentZone from the @agility/nextjs package, then utilize <ContentZone /> within your Page Template React component. The <ContentZone /> component will tell your Next.js site where to render the modules for this Content Zone within your code.

For example, this means that all modules in MainContentZone for a page are to be rendered here.

<ContentZone name="MainContentZone" {...props} getModule={getModule} />
2 out of 2 found this helpful



Please sign in to leave a comment.