これまでプロジェクトに含まれている Haedless SXA のプロジェクトを利用していましたが、これは以前から提供している Next.js と違いはあるのでしょうか？今回は新しい Next.js のアプリを準備して動かすところまで進めてみます。
package.json を確認する
これまで動かしていた JSS のアプリの package.json を確認すると以下のように記載されています。
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 などが含まれている）パスで作業をしていきます。今回は以下のコマンドを実行します。
PowerShell
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 で言語の設定をしているため、以下のコードを変更してください。
JSON
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 フォルダに移動して以下のコマンドを実行してください。
PowerShell
jss start:connectedしばらくすると、アプリが起動します。
URL にアクセスするとページを見ることができました。
package.json のファイルを見ると、バージョンが新しくなっているのがわかります。
まとめ
今回は新しい Next.js のアプリを立ち上げる手順を紹介しました。そのついでに、今回は新しいバージョンに変更することができました。