XM Cloud で提供している Next.js をベースにした SDK に関して、実際にどういう動きをしているのか？というのを簡単に取り上げてみたいと思います。今回は、レイアウト編です。
レイアウトファイルの指定
まず Next.js のプロジェクトを見ると、[[...path]]].tsx というファイルがあり、これが XM Cloud のコンテンツを生成していることがわかります。このファイルが指定しているレイアウトのファイルは src/Layout.tsx となります。
このレイアウトファイルの中を見ると、以下のような構成となっています。
<Head> エリア
ページのタイトルをアイテムの Title から取得します。空欄の場合は Page になります。
HTML エリア
実際に Body で利用する HTML のエリアは以下のように記載されています。
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>上記のように、 header, main, footer のタグの中にそれぞれの placeholder が指定されており、この場所にコンポーネントを配置することができます。
実際のページでの動作確認
今回は何もコンポーネントを配置していないページを用意してみました。
このページ自体にアクセスをすると当然空っぽのページが表示されます。
実際に出力される HTML のコードは以下のようになっています。
レイアウトで利用できる Placeholder を追加したい場合は、たとえば <main> の中で content 以外の部分を追加するなどで、トップレベルの Placeholder を追加することが可能です。
まとめ
今回はレイアウトとしてページのデータをどういう形で持っているのか、Placeholder の記述とそれに伴うコードがどういう形で記載されているのかを紹介しました。