XM Cloud のレイアウト処理を確認する

公開日 :

XM Cloud で提供している Next.js をベースにした SDK に関して、実際にどういう動きをしているのか？というのを簡単に取り上げてみたいと思います。今回は、レイアウト編です。

レイアウトファイルの指定

まず Next.js のプロジェクトを見ると、[[...path]]].tsx というファイルがあり、これが XM Cloud のコンテンツを生成していることがわかります。このファイルが指定しているレイアウトのファイルは src/Layout.tsx となります。

このレイアウトファイルの中を見ると、以下のような構成となっています。

<Head> エリア

  • ページのタイトルをアイテムの Title から取得します。空欄の場合は Page になります。

HTML エリア

実際に Body で利用する HTML のエリアは以下のように記載されています。

      <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 が指定されており、この場所にコンポーネントを配置することができます。

実際のページでの動作確認

今回は何もコンポーネントを配置していないページを用意してみました。

random desc

このページ自体にアクセスをすると当然空っぽのページが表示されます。

random desc

実際に出力される HTML のコードは以下のようになっています。

random desc

レイアウトで利用できる Placeholder を追加したい場合は、たとえば <main> の中で content 以外の部分を追加するなどで、トップレベルの Placeholder を追加することが可能です。

まとめ

今回はレイアウトとしてページのデータをどういう形で持っているのか、Placeholder の記述とそれに伴うコードがどういう形で記載されているのかを紹介しました。