前々回に Next.js のテンプレートの準備を、前回はそれを利用するための Sitecore にアイテムをインポートする手順を紹介しました。今回は Next.js の設定を変更して、Sitecore のアイテムを参照してページが表示されるところまで紹介をします。
設定ファイルを反映させる
テンプレートを作成すると以下のファイルが生成されています（プロジェクト名によって .config ファイルの名前が変わります。
- src\rendering\sitecore\config\sitecoredemo-jp.config
ファイルを反映させたあと、以下のコマンドでコンテナに反映させます。
PowerShell
docker compose build cmこれで CM サーバーに対して設定ファイルを反映させることができました。
Next.js のローカルプロジェクトのテスト
src\rendering\.env のファイルに対して、SITECORE_API_KEY と SITECORE_API_HOST の項目を設定してください。前者はすでに作成している API キーを、後者はホスト名を設定する形です。この２つの項目を設定した後、以下のコマンドでローカルで起動します。
PowerShell
jss start:connectedしばらくすると、下記のようにページが表示されます。
まとめ
実際には３回に分けてサンプルサイトの立ち上げ手順を紹介しました。Next.js のサンプルをプロジェクトに追加して、実際に Sitecore で利用するアイテムを展開、そして接続という形でした。実際の作業的には 1 時間もかかりませんが、ステップを踏んで紹介するために３回に分けた形です。次回はローカルではなく、Vercel に展開して表示していきます。