I would like to briefly discuss how the SDK based on Next.js provided by XM Cloud actually works. This time, we would like to take a look at the layout. This time, we will focus on the layout.
Check Next.js Layout files
First, if you look at the Next.js project, you will see a file named [[[. .path]].tsx file, which generates the content for XM Cloud. The layout file that this file specifies is src/Layout.tsx.
Looking inside this layout file, we see the following structure.
<Head> Area
Gets the page title from the item Title. If blank, it will be Page.
HTML Area
The HTML area actually used in the Body is described as follows
TypeScript
<div className={mainClassPageEditing}>
<header>
<div id="header">{route && <Placeholder name="headless-header" rendering={route} />}</div>
</header>
<main>
<div id="content">{route && <Placeholder name="headless-main" rendering={route} />}</div>
</main>
<footer>
<div id="footer">{route && <Placeholder name="headless-footer" rendering={route} />}</div>
</footer>
</div>As shown above, each placeholder is specified in the header, main, and footer tags, and components can be placed in this location.
Confirmation of operation on actual page
This time we have prepared a page with no components placed.
If you access this page itself, you will naturally see an empty page.
The actual HTML code output is as follows
If you wish to add a placeholder that can be used in a layout, you can add a top-level placeholder, for example, by adding a section in <main> other than content.
Summary
In this article, we introduced what form the data of the page is held in as a layout, the description of the placeholder and the code that accompanies it.