Pages で利用できるスタイルの動作確認
コンポーネント別のスタイルシートの適用を確認できましたが、Pages で利用可能なスタイルの仕組みがあります。これに関しての動作を確認していきます。
ブログ
ブログの記事を時系列で確認することが出来ます
XM Cloud の Starter Kit に Tailwind CSS のスタイルを適用する
Basic site は Bootstrap 5 で動作していますが、しばらくは Tailwind.css で動くよう手順を確認していきます。これによりデフォルトの動作に関して、確認していくことができます。今回はスタイルの適用です。
XM Cloud が提供しているグリッドの動作を確認する
以前に XM Cloud で利用する Next.js のグリッドの仕組みに関して少し取り上げましたが、動作に関して紹介をしていませんでした。今回はこれを取り上げたいと思います。
XM Cloud のレイアウト処理を確認する
XM Cloud で提供している Next.js をベースにした SDK に関して、実際にどういう動きをしているのか？というのを簡単に取り上げてみたいと思います。今回は、レイアウト編です。
Nodemailer を利用して Next.js のプロジェクトからメールを送信する
前回は nodemailer を利用してメールを送信する仕組みを確認しました。今回は、Next.js のプロジェクトを作成して、React Email および Nodemailer が連携できるような形で実装を進めていきます。今回は、React Email のリソースを追加しておきますが、主に API を利用してメールを送信するサンプルまで仕上げます。なお、Moosend でも Sitecore Send でも同じコードで動作します。
Nodemailer でメールを送信する
前回紹介をした React Email で作成したメールを、Sitecore Send の SMTP Service を利用して送信するために、まずはシンプルな Nodemailer のサンプルを動かしてみたいと思います。
React Email のサンプルを動かす
今回は React / TypeScript でメールを作成することができる React Email のサンプルを動かしてみたいと思います。
Next.js OpenAI Starter を Azure OpenAI と連携させる
これまで ChatGPT との連携を前提として進めてきましたが、Next.js OpenAI Starter は Azure Open AI とも連携が可能です。今回は、ChatGPT の API キーではなく、Azure Open AI との連携する方法を検証していきます。
Azure Open AI のサービスを立ち上げる
Azure Open AI を利用するにあたって、Azure の管理画面から作成するだけでなく、申請をして作成ができるようにする必要があります。今回はその手順を実施した時のメモになります。
Next.js OpenAI Starter サンプルを Sitecore Search と連携する
前回の記事では、Json のデータで提供されている情報をチャットが対応できるように AI の持っているデータを拡張して動作させました。今回は、Sitecore Search が持っているデータを連携させて、対応させたいと思います。
Next.js OpenAI Starter をカスタマイズする
サンプルを起動して、続いて動作の確認をしていきました。今回は簡単なカスタマイズをしていきます。
Next.js OpenAI Starter の動作を確認する
前回の記事では、サンプルのコードをそのまま動かしてみました。このサンプルに含まれているコードを見ながら動作を確認していきたいと思います。