Headless SXA

Sitecore で利用できる Next.js をベースとした Headless SXA に関する情報

XM Cloud のサンプルとなっている sxastarter は１言語でサイトを作ることが前提となっているため、多言語でサイトを運用するためには少し調整が必要です。今回はこの部分を2回にわたって紹介をします。

Tailwind CSS を利用している際には、Next.js に記載されていないスタイルに関しては build のタイミングで対象外となるため、CMS の変数として利用できるように tailwind.config.js に一部定義を追加する必要があります。

Starter Kit で用意されているサンプルは Bootstrap 5 で作成されているため、今回は Tailwind CSS を利用できるように Next.js のサンプルを書き換えていきます。

Sitecore XM Cloud で作成したアイテムに関しては、Sitecore CLI のツールを利用して YAML ファイルとしてシリアライズをすることが出来ます。今回は、この仕組みを利用してサイトの情報を GitHub で管理できるようにします。

今回はサンプルサイトを XM Cloud に作成をしていきます。また、サイトとしてどのスタイルシートを利用するのか、に関しても最後に取り上げます。

これまでブログで Tips を紹介している際に、.env ファイルの取り扱いをどうするのが一番いいのか悩んでいましたが、XM Cloud Tutorials #4 で紹介されていたので反映させます。

前回は XM Cloud のプロジェクトのテンプレートを利用して、GitHub にリポジトリの作成、ブランチの作成、そして Next.js の新しいプロジェクトを追加しました。今回はこれを XM Cloud に展開します。

これまでブログで紹介をしていた Tips を利用しながら、１つのサンプルに仕上げていきたいと思います。今回は Tailwind CSS を利用できるサンプルのベースを作っていきます。

前回の LinkList の動作を応用して、今回はパンくずリストのコンポーネントを作ってみたいと思います。

今回は Headless SXA のコンポーネントである LinkList コンポーネントがどのように定義されているのか、確認をしていきます。

前回は新しい Next.js のプロジェクトを動かすところまで実行しましたが、実際に 21.4.0 から 21.5.0 に対する差分の確認もできます。せっかくなので見てみましょう。

これまでプロジェクトに含まれている Haedless SXA のプロジェクトを利用していましたが、これは以前から提供している Next.js と違いはあるのでしょうか？今回は新しい Next.js のアプリを準備して動かすところまで進めてみます。

Showing 13 to 24 of 42 results