ローカルの Next.js のプロジェクトを XM Cloud に接続する : Haramizu.com

今回は手元にある Next.js のプロジェクトを直接 XM Cloud のインスタンスにつなげて動かす手順に関して紹介します。

API キーの取得

すでに稼働している CMS のコンテンツエディターを起動してください。続いてアイテムとしては /sitecore/system/Settings/Services/API Keys/xmcloudpreview のパスのアイテムを選択してください。このアイテムの Item ID が API キーになります。

CM サーバーの情報

すでに稼働している XM Cloud の CMS サーバーのインスタンス名を確認するために、XM Cloud Deploy の管理画面から、Detail タブをクリックしてサーバー名など取得してください。

この管理画面の一番下に、Edge Preview Endpoint という URL が設定されているので、GraphQL Playground の画面に切り替えます。Header には事前に取得している API キーを利用して以下の JSON を設定してください。

{
    "sc_apikey":"YOUR-API-KEY"
}

キーが合っていれば、以下のように GraphQL の管理画面として機能するようになります。

.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 で参照することが可能になります。しかしながら、以下のようなエラーが表示されることがあります。

エラー対策

エラーメッセージとしては rootItemId の項目が不足しているため、このエラーが発生していることがわかります。この設定は2か所変更する必要があります。

まず最初に、rootItemId に設定する値を取得します。この ID は Home アイテムのテンプレート ID を利用することになります。

この値をまず最初に src\sxastarter\src\lib\dictionary-service-factory.ts に追加してください。この項目はコメントアウトされているコードを利用して、以下のように追加する形となります。

以下のページを参考にしました。

How to solve JSS application error "Error: Valid value for rootItemId not provided and failed to auto-resolve app root item."

また、この機会にアプリケーションの名前を揃えていきます。サイトの Settings のアイテムに App name という項目があります。

この名前と 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

無事、ページが表示されました。

まとめ

今回は手元にコンテナを利用せずに、XM Cloud のサーバーインスタンスに接続をする手順を紹介しました。レンダリングは手元で実行するため、Windows 以外の環境でも操作することが可能になります。こういったモードがある、というのを理解しているだけでも、使うシナリオが出てきた時には便利な仕組みです。