21.x
  1. Next.js

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

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

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

JavaScriptレンダリングSDKs(JSS)21.7はNext.js 14を使用し、GraphQLのリトライを改善しています。

このアップデートには、環境変数、設定オブジェクト、JSSパッケージ、サービス、依存関係の変更が含まれます。

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

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

  • nextjs 
  • nextjs-sxa 
  • nextjs-multisite

!注始める前に

  • まだアップグレードしていなければ、アプリをJSS 21.6にアップグレードしてください。

  • 変更履歴に慣れておきましょう。もしアプリケーションが大幅にカスタマイズされている場合、追加で必要な変更のヒントを得るために参照する必要があるかもしれませんが、これはこのトピックで触れられないかもしれません。

  • Next.js 14のリリースについて読み、Next.js 14のアップグレードガイドを手元に置いておくと良いでしょう。アプリケーションのアップグレードを最終決定するために必要になるかもしれません。

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

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

GraphQLのリトライ機能はデフォルトで3回のリトライで有効化されましたが、Edge GraphQLエンドポイントからデータを取得する際にはデフォルトまたはカスタムのリトライ戦略を引き続き使用可能です。

グローバルな再試行回数をカスタマイズするには:

  • JSSアプリケーションの .env ファイルで、 GRAPH_QL_SERVICE_RETRIES 環境変数の値を希望の数値(またはリトライを無効にするために0)に更新します。

環境変数の変更を有効にするには、ローカルアプリケーションサーバーを再起動する必要があるかもしれません。

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

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

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

  1. 既存のアプリケーションのpackage.jsonファイルで、以下の手順を踏みます:

    • Next.jsのバージョンを更新してください:

      "next": "^14.1.0",

    • すべての @sitecore-jssパッケージをバージョン ~21.7.0に更新してください。

    • パッケージのバージョンをdevDependenciesに更新してください。以下の通りです:

      "@graphql-codegen/cli": "^5.0.0", "@graphql-codegen/import-types-preset": "^3.0.0", "@graphql-codegen/plugin-helpers": "^5.0.1", "@graphql-codegen/typed-document-node": "^5.0.1", "@graphql-codegen/typescript": "^4.0.1", "@graphql-codegen/typescript-operations": "^4.0.1", "@graphql-codegen/typescript-resolvers": "^4.0.1", "@graphql-typed-document-node/core": "^3.2.0",

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

    npm install

  3. Next.js専用のアップグレードはNext.js 14のアップグレードガイドを使って行ってください。必要に応じて、提供されたコードモッドを使ってNext.jsアップグレードを完了してください。

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

アップグレードのプロセスをできるだけ簡単にするために、JSS 21.7 Next.jsアプリケーションを作成する必要があります。このアプリから既存のアプリにファイルをコピーする必要があります。

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

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

    npx create-sitecore-jss@^21.7.0 nextjs

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

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

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

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

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

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

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

この手順では、既存のアプリケーションのファイルをJSS 21.7アプリの対応ファイルと同期させます。

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

  1. 21.7アプリからsrc/lib/next-config/plugins/component-props.jsファイルを既存のアプリにコピーしてください。

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

    • GraphQLDictionaryService構造体オプションでretriesオプションを見つけてください:

      retries: (process.env.GRAPH_QL_SERVICE_RETRIES && parseInt(process.env.GRAPH_QL_SERVICE_RETRIES, 10)) || 0,

    • そのコードブロックを以下のものに置き換えます。

      retries: (process.env.GRAPH_QL_SERVICE_RETRIES && parseInt(process.env.GRAPH_QL_SERVICE_RETRIES, 10)) as number,

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

    • GraphQLLayoutService構造体オプションでretriesオプションを見つけてください:

      retries: (process.env.GRAPH_QL_SERVICE_RETRIES && parseInt(process.env.GRAPH_QL_SERVICE_RETRIES, 10)) || 0,

    • そのコードブロックを以下のものに置き換えます。

      retries: (process.env.GRAPH_QL_SERVICE_RETRIES && parseInt(process.env.GRAPH_QL_SERVICE_RETRIES, 10)) as number,

SXAアドオンの更新

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

  1. 以下のファイルを21.7バージョンに置き換えてください:

    • src/assets/basic/_container.scss 
    • src/assets/sass/_app.scss

  2. /src/components/Image.tsxファイルを以下のように更新してください:

    • reactパッケージからCSSPropertiesタイプをインポートします:

      import React, { CSSProperties } from 'react';

    • backgroundStyle定数の定義を次のように更新します。

      const backgroundStyle = (props?.fields?.Image?.value?.src && { backgroundImage: `url('${props.fields.Image.value.src}')`, }) as CSSProperties;

今後のステップ

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

GraphQLのリトライに関してニーズを評価し、必要に応じてGraphQLリクエストリトライ戦略を用 いて、GraphQLエンドポイントのレート制限を緩和することを推奨します。

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