今回は手元にある Next.js のプロジェクトを直接 XM Cloud のインスタンスにつなげて動かす手順に関して紹介します。
API キーの取得
すでに稼働している CMS のコンテンツエディターを起動してください。続いてアイテムとしては /sitecore/system/Settings/Services/API Keys/xmcloudpreview のパスのアイテムを選択してください。このアイテムの Item ID が API キーになります。
![connectxmc01.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F547ggEaqwimnldSY9QJ2lm%2Ff28bd197131f0366cfb6e92da1ef7d01%2Fconnectxmc01.png&w=3840&q=75)
CM サーバーの情報
すでに稼働している XM Cloud の CMS サーバーのインスタンス名を確認するために、XM Cloud Deploy の管理画面から、Detail タブをクリックしてサーバー名など取得してください。
![connectxmc03.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F4n2O6kMgkzbJXTTlKf0r09%2F1a5da1ed310c846cdad76f932e41194c%2Fconnectxmc03.png&w=3840&q=75)
この管理画面の一番下に、Edge Preview Endpoint という URL が設定されているので、GraphQL Playground の画面に切り替えます。Header には事前に取得している API キーを利用して以下の JSON を設定してください。
{
"sc_apikey":"YOUR-API-KEY"
}
キーが合っていれば、以下のように GraphQL の管理画面として機能するようになります。
![connectxmc02.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2FT9WPKraPqIMTX1rDX79nf%2F103e6ac1fa55429777a5bfce4d69ee0b%2Fconnectxmc02.png&w=3840&q=75)
.env ファイルの編集
ローカルの Next.js を動かすための設定ファイルは src\sxastarter\.env のファイルとなります。このファイルの以下の項目を設定していきます。
SITECORE_API_KEY=your-api-key
SITECORE_API_HOST=https://yourhostname
DISABLE_SSG_FETCH=true
上記の設定の変更後、Next.js を起動します。
jss start:connected
これで http://localhost:3000 で参照することが可能になります。しかしながら、以下のようなエラーが表示されることがあります。
![connectxmc04.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F69jKCAV0mp9P2cVTkLn76A%2Fb67a866ef3355eb450b4ca533637dada%2Fconnectxmc04.png&w=3840&q=75)
エラー対策
エラーメッセージとしては rootItemId の項目が不足しているため、このエラーが発生していることがわかります。この設定は2か所変更する必要があります。
まず最初に、rootItemId に設定する値を取得します。この ID は Home アイテムのテンプレート ID を利用することになります。
![connectxmc05.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F1gCSKQGDhfoG6XuuNtymLP%2F906d7c0585b9fa7ee58e46cb5774eb15%2Fconnectxmc05.png&w=3840&q=75)
この値をまず最初に src\sxastarter\src\lib\dictionary-service-factory.ts に追加してください。この項目はコメントアウトされているコードを利用して、以下のように追加する形となります。
![connectxmc06.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F6O0el3IWKiCUt5lhr6vGAD%2Fa7ac5662e6303b3fdfc326351dd24a4f%2Fconnectxmc06.png&w=3840&q=75)
以下のページを参考にしました。
また、この機会にアプリケーションの名前を揃えていきます。サイトの Settings のアイテムに App name という項目があります。
![connectxmc07.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F6G3EcoxLbLX7XeziPxCwq4%2Ff65c44cc55dc8daf25254a2d8d8ded8d%2Fconnectxmc07.png&w=3840&q=75)
この名前と package.json の名前を揃えてください。今回は以下のように appName の項目を書き換えています。
{
"name": "sxastarter",
"description": "Application utilizing Sitecore JavaScript Services and Next.js",
"version": "21.2.0",
"private": true,
"config": {
"appName": "sitecoredemo-jp",
"rootPlaceholders": [
"jss-main"
],
これで準備が完了となりました。以下のコマンドを利用して XM Cloud のインスタンスにアクセスをします。
jss start:connected
無事、ページが表示されました。
![connectxmc08.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F75cziffknlPbjjsKvOiuS6%2F845ffc614a95d3e56dc07bd14ee90ddc%2Fconnectxmc08.png&w=3840&q=75)
まとめ
今回は手元にコンテナを利用せずに、XM Cloud のサーバーインスタンスに接続をする手順を紹介しました。レンダリングは手元で実行するため、Windows 以外の環境でも操作することが可能になります。こういったモードがある、というのを理解しているだけでも、使うシナリオが出てきた時には便利な仕組みです。