これまでデフォルトの Basic Site のコンテンツを利用して動作確認をしていましたが、今回は新しくブランクのサイトを作成して、新しい Next.js のプロジェクトと連携する手順を確認していきます。
![](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F4SgSN5iBZDWwTs87nf5JfC%2Fccdbfd7cb1ed848019547354c0562fcb%2Felena-mozhvilo-CwIOnANQW-A-unsplash.jpg&w=3840&q=75)
新しいサイトを作成する
すでにサイトが作成されている状況で、新しいサイトを追加するときには右上にある Create website のボタンをクリックしてください。
![createwebsite01.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F3eD0iXG3MnjRZz0SkYaqns%2Fce8fbe51f338855bbf994a4b38065447%2Fcreatewebsite01.png&w=3840&q=75)
クリックをすると下の画面のようにテンプレートの選択画面となります。今回は、Empty Siteを選択します。
![createwebsite02.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F4RqxaQVdtpQWPrcuCpW5G6%2F5c33f81fea1f7ca6feee5c5062ef2c22%2Fcreatewebsite02.png&w=3840&q=75)
続いてサイトの名前を指定します。
![createwebsite03.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F01MXAuE4BXh0go46LEtJIN%2Fc4c32d8ecfe221cb42edabaad2c2bb47%2Fcreatewebsite03.png&w=3840&q=75)
クリックをするとサンプルのサイトを作成するのに数分待ちます。
![createwebsite04.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F4sqrLeNpBKLQ7zqp7Ed8SO%2Fea7a9a9ee9e8bbda357859680641fac5%2Fcreatewebsite04.png&w=3840&q=75)
Pages を開くと、空っぽのサイトが出来上がっているのがわかります。今回はとりあえず Title のコンポーネントを Main に配置しておきます。
![createwebsite05.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F1ZTn5p9uiOHwzWQpixFyuc%2F7990d8726be05b8fd0b74fe575cd91e2%2Fcreatewebsite05.png&w=3840&q=75)
サイトを公開する
新しくサイトを追加したため、必要なデータをまずは公開します。今回は、XM Cloud Deploy の画面から、Publish all sites を実行します。
![createwebsite06.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F2TmJ4qfu5nZBbJgim1u6K5%2F8baf1eef6010a132428c96cb6779f8d5%2Fcreatewebsite06.png&w=3840&q=75)
新しい Next.js のプロジェクトを作成する
新しく Next.js のプロジェクトを追加していきます。手順は Netlify にサイトを立ち上げるときと同じです。
今回は、xmc-tailwind という名前のプロジェクトを、src の下に追加をします。
![createwebsite13.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F2jPIN1lT0D3ieiu5TFhzpQ%2F9e991f047bd38e703856390badd2b42a%2Fcreatewebsite13.png&w=1920&q=75)
新規に作成した場合、コマンドラインで直接追加された際には git init が実行されてしまうため、.git のフォルダを削除する必要があります。
![createwebsite14.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F6nETJahnBjE1OTy8png1MX%2F447c1bab3c0ceb0f7347b643ba3c748a%2Fcreatewebsite14.png&w=1920&q=75)
これで新しいプロジェクトが追加された形となります。VS Code で見ると以下のようになっています。
![createwebsite15.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F2WoiyDnSH2FuE42WWkTLQJ%2F9ba56b8f686befd9d934bd35da53424c%2Fcreatewebsite15.png&w=1920&q=75)
作成した新しいプロジェクトに含まれる .env ファイルをコピーして .env.local として、XM Cloud から以下の値を取得、設定してください。
- SITECORE_API_KEY
- SITECORE_API_HOST
- GRAPH_QL_ENDPOINT
- JSS_APP_NAME ( サイトの名前と同じ、今回は xmc-tailwind )
- DEFAULT_LANGUAGE ( en を設定します )
上記の値が設定できたところで、jss start:conntected で Sitecore にアクセスをすると、公開済みのデータを利用してページを見ることができます。
![createwebsite07.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F5nc6cWVcg7QSRSYnI5YJYi%2F770a31f6826941d9a5932a2db6acd9aa%2Fcreatewebsite07.png&w=3840&q=75)
これで追加のアプリで新しいサイトを参照できる形となりました。
Vercel に展開する
新しく作成した Next.js を展開するために、Vercel で別の新しいプロジェクトを作成します。すでに展開しているサイトとの違いとしては、root directory のパスが異なる形です。
![createwebsite08.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F5UZfmOBAAmN4qBoKOxrFhY%2F302583ae97b455de4fcd9d9bd8eaf41e%2Fcreatewebsite08.png&w=1920&q=75)
また、JSS_APP_NAME に関して別のアプリ名となっているため、Environment Variables に関してはこれを変更して進めていきます。しばらくするとサイトが立ち上がります。
![createwebsite09.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F2dYFAybVVjlldGgKU2xbgr%2F65f926b8383d039fa8d09b9ddc22626f%2Fcreatewebsite09.png&w=3840&q=75)
SXA サイトの微調整
複数のサイトがある場合の Sitecore の設定に関して、hostname の部分が2つとも * となるため変更をする必要があります。まず、一つ目のサイトを今回は sitecoredemo-jp とします。
![createwebsite10.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F6NknvCCQ2oX3HpJyDOMPAe%2F6618fc0d8e4bf1143a07c9b30e564b3b%2Fcreatewebsite10.png&w=3840&q=75)
もう一つのサイトに対しても Hostname を設定します。その後、管理画面のデスクトップツールから、PowerShell Toolbox をクリック、SXA Site Manager を開きます。
![createwebsite11.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2FadLZfAo0HyQVcZ7T4kAXq%2F872d880dd87722ebf9742a6f6e89155c%2Fcreatewebsite11.png&w=3840&q=75)
以下の様にエラーが表示されていなければ、問題なく利用できます。
![createwebsite12.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F5VLB6GSJMbbTSJScpT3rmp%2F2e038f968dfdbf2425da39f2fe6381e9%2Fcreatewebsite12.png&w=3840&q=75)
シリアライズの定義を作成
新しいサイトのデータも管理するために、以下のファイルを src の下に作成しました。まず、モジュール関連ということで、Tailwind.module.json のファイルのコードです。
{
"namespace": "Tailwind",
"items": {
"includes": [
{
"name": "tw-placeholders",
"path": "/sitecore/layout/Placeholder Settings/Project/xmc-tailwind"
},
{
"name": "tw-component-renderings",
"path": "/sitecore/layout/Renderings/Feature/Tailwind"
},
{
"name": "tw-component-settings",
"path": "/sitecore/system/Settings/Feature/Tailwind"
},
{
"name": "tw-component-branches",
"path": "/sitecore/templates/Branches/Feature/Tailwind"
},
{
"name": "tw-component-template",
"path": "/sitecore/templates/Feature/Tailwind"
},
{
"name": "tw-renderings",
"path": "/sitecore/layout/Renderings/Project/xmc-tailwind"
},
{
"name": "tw-templates",
"path": "/sitecore/templates/Project/xmc-tailwind"
}
]
}
}
続いてコンテンツ関連として、TaindindContent.module.json のファイルを作成します。
{
"namespace": "Tailwind-Content",
"references": ["Tailwind"],
"items": {
"includes": [
{
"name": "tw-content",
"path": "/sitecore/content/xmc-tailwind"
},
{
"name": "tw-media",
"path": "/sitecore/media library/Project/xmc-tailwind"
}
]
}
}
これで設定は完了となります。以下のコマンドで、シリアライズを実行してください。
dotnet sitecore ser pull -n development
実行すると tw というフォルダ名でデータが出来上がっていることがわかります。
![createwebsite16.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F2NImLt5CzjiZDhbO3FXnf0%2Febb0f5db71cccdab2fddf88b330a11d2%2Fcreatewebsite16.png&w=3840&q=75)
まとめ
今回は新しいサイト、新しいプロジェクトを作成して、Vercel に展開する流れを紹介しました。XM Cloud のプロジェクトをサイトごとに作るのではなく、1つの XM Cloud で複数のサイトの設定ができることが確認できました。