--- title: "JSS 21.6.4 Next.jsアプリをバージョン21.7にアップグレードしてください" slug: "upgrade-jss-21-6-4-next-js-apps-to-version-21-7" abstract: "JavaScriptレンダリングSDKをバージョン21.7にアップグレードして、Next.js 14と改良されたGraphQLリクエストのリトライを活用しましょう。" --- # JSS 21.6.4 Next.jsアプリをバージョン21.7にアップグレードしてください 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にアップグレード](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/upgrade-jss-21-5-next-js-apps-to-version-21-6.html "Upgrade JSS 21.5 Next.js apps to version 21.6")してください。 > > - [変更履歴](https://github.com/Sitecore/jss/releases/tag/v21.7.0)に慣れておきましょう。もしアプリケーションが大幅にカスタマイズされている場合、追加で必要な変更のヒントを得るために参照する必要があるかもしれませんが、これはこのトピックで触れられないかもしれません。 > > - [Next.js 14のリリース](https://nextjs.org/blog/next-14)について読み、[Next.js 14のアップグレードガイド](https://nextjs.org/docs/app/building-your-application/upgrading/version-14)を手元に置いておくと良いでしょう。アプリケーションのアップグレードを最終決定するために必要になるかもしれません。 > このトピックでは、以下の方法を説明します: - [既存のアプリの環境変数を更新](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/upgrade-jss-21-6-4-next-js-apps-to-version-21-7.html#UUID-61ab4bac-42fc-64b1-6347-3132f9539844_section-idm4611658809566434120211252755 "Update environment variables for your existing app")してください。 - [既存のアプリでアプリケーションの依存関係を更新](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/upgrade-jss-21-6-4-next-js-apps-to-version-21-7.html#UUID-61ab4bac-42fc-64b1-6347-3132f9539844_section-idm4507338688070434120210725859 "Update application dependencies in your existing app")してください。 - [JSS 21.7 Next.jsアプリケーションを作成し](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/upgrade-jss-21-6-4-next-js-apps-to-version-21-7.html#UUID-61ab4bac-42fc-64b1-6347-3132f9539844_section-idm4620167227648034120210091693 "Create a JSS 21.7 Next.js application")ましょう。 - [既存のアプリ内のNext.jsテンプレートファイルを更新](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/upgrade-jss-21-6-4-next-js-apps-to-version-21-7.html#UUID-61ab4bac-42fc-64b1-6347-3132f9539844_section-idm4545590124406434120210480859 "Update the Next.js template files in your existing app")してください。 - [SXAアドオンを更新](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/upgrade-jss-21-6-4-next-js-apps-to-version-21-7.html#UUID-61ab4bac-42fc-64b1-6347-3132f9539844_section-idm4545590049686434120429456559 "Update the SXA add-on")してください。 ## 既存のアプリの環境変数を更新してください GraphQLのリトライ機能はデフォルトで3回のリトライで有効化されましたが、[Edge GraphQLエンドポイントからデータを取得する際にはデフォルトまたはカスタムのリトライ戦略を引き続き使用](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/use-retry-strategies-for-requests-to-experience-edge.html "Use retry strategies for requests to Experience Edge")可能です。 グローバルな再試行回数をカスタマイズするには: - 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のアップグレードガイド](https://nextjs.org/docs/app/building-your-application/upgrading/version-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. create-sitecore-jss@21.7.0パッケージをインストールするよう促された場合、*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固有の問題に対してデバッグログを有効にし](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/debug-logging-in-jss-apps.html "Debug logging in JSS apps") てください。 GraphQLのリトライに関してニーズを評価し、必要に応じて[GraphQLリクエストリトライ戦略を用](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/use-retry-strategies-for-requests-to-experience-edge.html "Use retry strategies for requests to Experience Edge") いて、GraphQLエンドポイントのレート制限を緩和することを推奨します。