Headless SXA の新規プロジェクトを作成する : Haramizu.com

これまでプロジェクトに含まれている Haedless SXA のプロジェクトを利用していましたが、これは以前から提供している Next.js と違いはあるのでしょうか？今回は新しい Next.js のアプリを準備して動かすところまで進めてみます。

package.json を確認する

これまで動かしていた JSS のアプリの package.json を確認すると以下のように記載されています。

{
  "name": "sxastarter",
  "description": "Application utilizing Sitecore JavaScript Services and Next.js",
  "version": "21.4.0",
  "private": true,
  "config": {
    "appName": "sxastarter",
    "rootPlaceholders": [
      "jss-main"
    ],
    "sitecoreConfigPath": "/App_Config/Include/zzz",
    "graphQLEndpointPath": "/sitecore/api/graph/edge",
    "language": "en",
    "templates": [
      "nextjs",
      "nextjs-sxa",
      "nextjs-personalize",
      "nextjs-multisite"
    ]
  },

テンプレートとしては nextjs だけでなく、sxa、personalize および multisite が含まれています。では新しいプロジェクトを作っていきます。

新しい Next.js のプロジェクトを作成する

今回は src のディレクトリ（ sxastarter もしくは rendering などが含まれている）パスで作業をしていきます。今回は以下のコマンドを実行します。

npx create-sitecore-jss

まず最初に、どのテンプレートを利用するのかの確認が表示されます。ここでは、next.js を選択してください。

続いてインストールするパスを確認してきます。今回は nextjs のまま進めます。

続いて pre build の時の動作を確認してきますが、ここでは Y を回答します。次はアプリの名前ですが、今回は sitecore-nextjs-app に名前を変更します。

Sitecore のホスト名を確認してきますが、今回はデフォルトのまま進めていきます。辞書のデータは Graphql で、SSG を選択します。

続いてどのテンプレートを利用するのか？という画面が表示されます。ここでは、上記の Package.json と同じ項目を選択します。

上記の選択をすると、必要な処理を実行します。

しばらくすると、新しい Next.js のアプリがプロジェクトに追加されます。

設定を新しいアプリに反映させる

まだほとんど設定していないため、以下のファイルを古いアプリからコピーしてください。

src\rendering\.env
src\rendering\src\components\Types.tsx
src\rendering\src\components\YouTube.tsx

また、next.config.js で言語の設定をしているため、以下のコードを変更してください。

i18n: { // These are all the locales you want to support in your application. // These should generally match (or at least be a subset of) those in Sitecore. locales: ['en', 'ja-JP'], // This is the locale that will be used when visiting a non-locale // prefixed path e.g. `/styleguide`. defaultLocale: jssConfig.defaultLanguage, localeDetection: false, },

これで新しいアプリの準備ができました。

動作確認

実際に nextjs フォルダに移動して以下のコマンドを実行してください。

jss start:connected

しばらくすると、アプリが起動します。

URL にアクセスするとページを見ることができました。

package.json のファイルを見ると、バージョンが新しくなっているのがわかります。

まとめ

今回は新しい Next.js のアプリを立ち上げる手順を紹介しました。そのついでに、今回は新しいバージョンに変更することができました。