XM Cloud で Tailwind CSS のサンプルサイトを作成 - その6 Next.js に Tailwind CSS を適用する
Starter Kit で用意されているサンプルは Bootstrap 5 で作成されているため、今回は Tailwind CSS を利用できるように Next.js のサンプルを書き換えていきます。
世界トップクラスのエンタープライズ対応CMSで、適切なコンテンツをあらゆる場所で素早く作成、管理、配信できます。
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 を利用しながら、1つのサンプルに仕上げていきたいと思います。今回は Tailwind CSS を利用できるサンプルのベースを作っていきます。
ブログでこれまで XM Cloud に関して取り上げてきましたが、プロジェクトの作成の画面なども機能強化されているため、改めて最新の画面で CMS を作成していきます。
今回は Sitecore XM / XM Cloud で提供している便利な機能、Rendering Contents Resolvers について取り上げます。レンダリングの定義で複数の定義が用意されており、これを活用することで効率よくコンポーネントを作成することができます。
すでに手元で動かしているサンプルは Tailwind.css を利用していますが、もう一歩進んで NextUI を今回は適用したいと思います。これは Next.js を提供している Vercel が提供しているユーザーインターフェイスツールとなります。
前回はサンプルのコードを配置して動かすところまで進めていきました。今回は、どういうコードの記述が必要か、データはどういう形で持つのか?などを確認していきたいと思います。
これまでブログでは Headless SXA の仕組みで登録をするコンポーネント、Sitecore Components を利用してノーコードで作成するコンポーネントを紹介しました。今回はこれと違って、コンポーネントを持ち込む、という感じの実装を紹介します。
前回はコンポーネントに画像、テキストを固定で作成してページに貼り付けましたが、今回は独自のテンプレートを追加して、そのデータを利用してコンポーネントのレンダリングをしたいと思います。