1. Sitecore JavaScript Next.jsのレンダリングSDK (JSS)

JSS 21.7 Next.jsアプリをバージョン22.0.0にアップグレードする

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

このページの翻訳は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」と入力すると、現在の作業ディレクトリにappフォルダが作成されます。

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

  5. Sitecore XM Cloud向けにビルドしているかどうか尋ねられたら、nと答えて、XM Cloudアドオンのインストールをスキップします。

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

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

既存のアプリのNext.jsテンプレート ファイルを更新する

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

Next.jsテンプレート ファイルを更新するには:

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

    • 次のimportステートメントを追加します。

      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ステートメントを追加します。

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

    • 次のGraphQLDictionaryServiceコンストラクタ オプション (存在する場合) を見つけます。

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

    • これらのオプションを次のように置き換えます。

      clientFactory,

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

SXAアドオンを更新する

SXAアドオンをアップグレードするには:

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

    • 次のimportステートメントを追加します。

      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ステートメントを追加します。

      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ステートメントを追加します。

      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ステートメントを追加します。

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

    • configインポートを削除します。

      import config from 'temp/config';

    • GraphQLRobotsServiceのインスタンス化の場合は、次のオプションを見つけます。

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

    • これらを次のように置き換えます。

      clientFactory,

Multisiteアドオンを更新する

Multisiteアドオンを更新するには:

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

    • 次のimportステートメントを追加します。

      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ステートメントを追加します。

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

    • MultisiteGraphQLSitemapServiceのインスタンス化の場合は、次のオプションを見つけます。

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

    • これらを次のように置き換えます。

      clientFactory,

  3. JSSは、siteクエリを使用してサイト情報を取得するようになったことに注意してください。マルチサイト アドオンがインストールされている場合、siteクエリはSXAヘッドレス サイトと構成サイトの両方を取得します。JSSではwebsiteという用語が除外されますが、構成で定義されている他のMVCサイトまたは非Next.jsサイトは、JSSアプリによる解決と見なされます。これが影響し、セットアップにヘッドレス サイトのみを使用して回避したい場合は、\scripts\config\plugins\multisite.tsファイルにフィルターを追加できます。例えば：

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

次のステップ

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

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