Layouts are essentially parts, with an extra trick up their sleve. Regions. This means that layouts may host other components, and build rich page structures.

Task: Add layout to Enonic

Adding layouts is more or less identical to pages and parts. Simply follow the steps below:

  1. Add the 2-column layout to the Enonic app

    <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
    <layout xmlns="urn:enonic:xp:model:1.0">
        <display-name>2 columns</display-name>
        <description>Provides left and right regions</description>
            <region name="left"/>
            <region name="right"/>
    Just like a page, layouts may declare named regions.
  2. Add the preview helper

    var proxy = require('/lib/nextjs-proxy/proxy');
    exports.get = proxy.get;

    When completed, as always redeploy the Enonic app.

Task: Setup layout rendering in Next

Moving over to the the Next app, you must add the the component that will render the layout.

  1. Add the layout component files

    import React from 'react'
    import {RegionView} from '../../_enonicAdapter/views/Region';
    import {LayoutProps} from '../../_enonicAdapter/views/BaseLayout';
    import styles from './TwoColumnLayout.module.css';
    const TwoColumnLayout = (props: LayoutProps) => {
        const regions = props.layout.regions;
        const {common, meta} = props;
        return (
                <div className={styles.row}>
                    <RegionView className="col-sm-6" name="left" components={regions['left']?.components} common={common} meta={meta}/>
                    <RegionView className="col-sm-6" name="right" components={regions['right']?.components} common={common} meta={meta}/>
    export default TwoColumnLayout;

    And it’s CSS module

    .row {
        display: flex;
        gap: 10px;
        margin-bottom: 10px;
        flex-wrap: wrap;
    .row :global(div[data-portal-region]) {
        flex: 1;
        min-width: 200px;
    .row :global(.xp-page-editor-region-placeholder) {
        margin-bottom: 0;
    This is an example of using CSS modules. For more details visit the Next.js style documentation
  2. Register the component in _mappings.ts:

    Add these new lites to the _mappings.ts file.

    import TwoColumnLayout from './layouts/TwoColumnLayout';
    ComponentRegistry.addLayout(`${APP_NAME}:2-column`, {
        view: TwoColumnLayout
    this specific layout does not need any additional data - hence no query or processor:

After completing these steps, you should be able to add the layout to a page, and then add components inside the layout. It might look something like this:

layout empty

By combining layout, part and text we are starting to see the potential of the page editor:

layout part text

In the next chapter we will look into reuse of pages across content items.