1. Next.js

JSS 21.7 Next.jsアプリをバージョン22.0.0にアップグレードしてください

Version: 22.x
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

このトピックでは、バージョン22.0.0の新機能を活用するために既存のJSS 21.7アプリケーションに加えるべきほとんどの変更点を扱います。しかし、JavaScriptやNext.jsアプリケーション開発の性質上、このトピックでは既存アプリケーションで可能なすべてのカスタマイズ性を考慮していません。

!重要ここに挙げられているいくつかの変更点は、21.6および21.7アップグレードガイドの内容を繰り返しています。もしまだこれらの変更をすべて行っていなければ、22.0.0へのアップグレード時にビルドエラーを防ぐために、必ず実施してください。

アップグレードを行う際は、Next.jsアプリケーションを作成する際に使用したJSSテンプレートやアドオンを考慮してください。それらはpackage.jsonファイル内で見つけることができます。例えば、JSS 21.7アプリケーションでは以下のテンプレートやアドオンが使われる場合があります。

  • nextjs 
  • nextjs-sxa 
  • nextjs-multisite

!注始める前に

  • まだなら、アプリをJSS 21.7にアップグレードしてください。

  • 変更ログに慣れておきましょう。アプリケーションが大幅にカスタマイズされている場合、変更ログはこのトピックで扱われていない追加の変更点の指針を提供します。

このトピックでは、以下の方法を説明します:

既存のアプリの環境変数を更新してください

JSS_APP_NAME環境変数が存在する場合は、SITECORE_SITE_NAMEにリネームします。

既存のアプリでアプリケーション依存関係を更新する

アップグレードされたアプリケーションを正しく動作させるには、依存関係も更新する必要があります。

依存関係を更新するには:

  1. 既存のアプリケーションのpackage.jsonファイルで、すべての @sitecore-jssパッケージをバージョン ~22.0.0に更新してください。

  2. 以下のコマンドで依存関係をインストールします:

    npm install

JSS 22.0.0 Next.jsアプリケーションを作成する

アップグレードプロセスをできるだけ簡単にするために、JSS 22.0.0 Next.jsアプリケーションを作成しましょう。このアプリから既存のアプリにいくつかのファイルをコピーできます。

JSS 22.0.0 Next.jsアプリケーションを作成するには:

  1. コンソールでは、次のコマンドを実行します:

    npx create-sitecore-jss@^22.0.0 nextjs

  2. [email protected]パッケージをインストールするよう促された場合、yに答えてください。

  3. JSS 22.0.0 Next.jsアプリのフォルダパスを入力します。例えば、./jss22と入力すると、現在の作業ディレクトリにアプリフォルダを作成します。

  4. 残りのプロンプトに従い、既存のアプリケーションと同じデータ取得(GraphQLまたはREST)とプリレンダリング(SSGまたはSSR)を選択してください。

  5. Sitecore XM Cloud用にビルドしているか尋ねられたら、XM Cloudアドオンのインストールをスキップするためにnと答えてください。

  6. 既存のアプリケーションで使っている他のアドオンを選択し、Enterキーを押してください。

スクリプトはその後、アプリケーションの依存関係をインストールします。

既存のアプリでNext.jsテンプレートファイルを更新してください

これは、既存のアプリケーション内のファイルを新しいJSS 22.0.0アプリの対応ファイルと同期する方法を説明しています。

Next.jsテンプレートファイルの更新:

  1. /src/lib/layout-service-factory.tsファイルをカスタマイズしていなければ、22.0.0バージョンに置き換えてください。それ以外の場合は、以下のようにファイルを修正してください:

    • 以下のインポートステートメントを追加してください:

      import clientFactory from 'lib/graphql-client-factory';

    • もし存在する場合は、以下のGraphQLLayoutServiceコンストラクタオプションを探してください:

      endpoint: config.graphQLEndpoint, apiKey: config.sitecoreApiKey,

    • それらのオプションを以下のものに置き換えてください:

      clientFactory,

  2. /src/lib/dictionary-service-factory.tsファイルをカスタマイズしていなければ、22.0.0バージョンに置き換えてください。それ以外の場合は、以下のようにファイルを修正してください:

    • 以下のインポートステートメントを追加してください:

      import clientFactory from 'lib/graphql-client-factory';

    • もし存在する場合は、以下のGraphQLDictionaryServiceコンストラクタオプションを探してください:

      endpoint: config.graphQLEndpoint, apiKey: config.sitecoreApiKey,

    • それらのオプションを以下のものに置き換えてください:

      clientFactory,

  3. カスタムコードのisEditorActive、resetEditorChormes、resolveUrl、handleEditorFastRefresh、getPublicUrl関数をインポートする場合は、sitecore-jss-nextjs/utilsからインポートし、sitecore-jss-nextjsしていないことを確認してください。

SXAアドオンの更新

SXAアドオンのアップグレード:

  1. /src/lib/middleware/plugins/redirects.tsファイルをカスタマイズしていなければ、22.0.0バージョンに置き換えてください。それ以外の場合は、以下のように修正してください:

    • 以下のインポートステートメントを追加してください:

      import clientFactory from 'lib/graphql-client-factory';

    • 以下のRedirectsMiddleware構成オプションを見つけてください:

      endpoint: config.graphQLEndpoint, apiKey: config.sitecoreApiKey,

    • 以下のものに置き換えてください:

      clientFactory,

  2. /src/pages/404.tsxと/src/pages/500.tsxファイルをカスタマイズしていなければ、22.0.0バージョンに置き換えてください。それ以外の場合は、以下のように修正してください:

    • getStaticProps関数に次のインポート文を追加します:

      import clientFactory from 'lib/graphql-client-factory';

    • GraphQLErrorPagesServiceインスタンス化については、以下のオプションを見つけてください:

      endpoint: config.graphQLEndpoint, apiKey: config.sitecoreApiKey,

    • 以下のものに置き換えてください:

      clientFactory,

  3. \src\pages\api\sitemap.tsファイルをカスタマイズしていなければ、22.0.0バージョンに置き換えてください。それ以外の場合は、以下のように修正してください:

    • 以下のインポートステートメントを追加してください:

      import clientFactory from 'lib/graphql-client-factory';

    • GraphQLSitemapXmlServiceインスタンス化については、以下のオプションを見つけてください:

      endpoint: config.graphQLEndpoint, apiKey: config.sitecoreApiKey,

    • 以下のものに置き換えてください:

      clientFactory,

  4. \src\pages\api\robots.tsファイルをカスタマイズしていなければ、22.0.0バージョンに置き換えてください。それ以外の場合は、以下のように修正してください:

    • 以下のインポートステートメントを追加してください:

      import clientFactory from 'lib/graphql-client-factory';

    • configインポートを削除してください:

      import config from 'temp/config';

    • GraphQLRobotsServiceインスタンス化については、以下のオプションを見つけてください:

      endpoint: config.graphQLEndpoint, apiKey: config.sitecoreApiKey,

    • 以下のものに置き換えてください:

      clientFactory,

マルチサイトアドオンの更新

マルチサイトアドオンの更新:

  1. /scripts/config/plugins/multisite.tsファイルをカスタマイズしていなければ、22.0.0バージョンに置き換えてください。それ以外の場合は、以下の手順を踏みます。

    • 以下のインポートステートメントを追加してください:

      import { createGraphQLClientFactory } from 'lib/graphql-client-factory/create';

    • GraphQLSiteInfoServiceコンストラクタ呼び出しについては、以下のオプションを見つけます。

      endpoint: config.graphQLEndpoint, apiKey: config.sitecoreApiKey,

    • 以下のものに置き換えてください:

      clientFactory: createGraphQLClientFactory(config),

  2. /src/lib/sitemap-fetcher/plugins/graphql-sitemap-service.tsファイルをカスタマイズしていなければ、22.0.0バージョンに置き換えてください。それ以外の場合は、以下の手順を踏みます。

    • 以下のインポートステートメントを追加してください:

      import clientFactory from 'lib/graphql-client-factory';

    • MultisiteGraphQLSitemapServiceインスタンス化については、以下のオプションを見つけてください:

      endpoint: config.graphQLEndpoint, apiKey: config.sitecoreApiKey,

    • 以下のものに置き換えてください:

      clientFactory,

  3. JSS現在はsiteクエリを使ってサイト情報を取得することに注意してください。マルチサイトアドオンがインストールされている場合、siteクエリはSXA Headlessと設定サイトの両方を取得します。JSSは ウェブサイトという用語をフィルタリングしますが、構成で定義されている他のMVCやNext.jsでないサイトはJSSアプリによって解決対象として考慮されます。もしこれがあなたに影響し、設定にヘッドレスサイトだけを使って回避したい場合は、\scripts\config\plugins\multisite.tsファイルにフィルターを追加できます。例えば:

    sites = sites.filter((site) => !'not-headless', 'headful', 'mvc'.includes(site.name));

今後のステップ

アップグレードプロセスを最終決定するには、発生したエラーや警告を必ず解決してください。必要に応じて、JSS固有の問題に対してデバッグログを有効にし てください。

この記事を改善するための提案がある場合は、 お知らせください!