---
title: "JSSアプリをJSS 21.7にアップグレードする"
slug: "upgrade-jss-apps-to-jss-21-7"
abstract: "このガイドに従って、JSSアプリをJSS 21.7にアップグレードしてください。Next.jsアプリの場合はNext.js 14にアップグレードします。Reactの場合は、いくつかの依存関係を置き換えます。NodeのヘッドレスSSRプロキシでは、レイアウトサービスのクエリパラメータに小さなアップデートがあります。"
---
# JSSアプリをJSS 21.7にアップグレードする

Sitecore JavaScript Rendering SDKバージョン21.7では、パッケージJSS、その他のNPM依存関係、そしていくつかの環境変数に変更が加えられています。

> !注**始める前に**
> 
> -   まだアップグレードしていなければ、[アプリをJSS 21.6にアップグレード](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/upgrade-jss-apps-to-jss-21-6.html "Upgrade JSS apps to JSS 21.6")してください。
>     
> -   アップグレードの影響を理解するために、[JSS 21.7のリリースノート](https://github.com/Sitecore/jss/releases/tag/v21.7.0) に精通してください。
>     

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

-   [Reactアプリ内の依存関係を更新](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/upgrade-jss-apps-to-jss-21-7.html#UUID-226332c4-c076-6af9-53d3-2df5198b4410_section-idm4663567482704034123553332468 "Update dependencies in React apps")してください。
-   [JSS Next.jsアプリをJSS 21.7にアップグレードしてください](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/upgrade-jss-apps-to-jss-21-7.html#UUID-226332c4-c076-6af9-53d3-2df5198b4410_section-idm4603080884340834123838250605 "Upgrade JSS Next.js apps to JSS 21.7")。
-   [NodeのヘッドレスSSRプロキシアプリを更新](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/upgrade-jss-apps-to-jss-21-7.html#UUID-226332c4-c076-6af9-53d3-2df5198b4410_section-idm4542112576596834123569394651 "Update the Node headless SSR proxy app")してください。

## Reactアプリで依存関係を更新する

JSSテンプレートに基づいてアプリケーションをアップグレードするには、いくつかの依存関係を変更し、その使用方法を置き換える必要があります。

アプリケーションのアップグレード:

1.  package.jsonファイルでは、すべての@sitecore-jss依存関係を~21.7.0バージョンに更新し、deep-equal依存関係をバージョンfast-deep-equal^3.1.3に置き換えてください。
    
2.  シェルでは、以下のコマンドを実行してアプリ内の依存関係をインストールまたは更新します:
    
    npm install
    
3.  /src/Layout.jsファイルを以下のように更新してください:
    
    -   deepEqualインポート文を削除してください。
        
    -   新たに追加された依存関係からfastDeepEqual関数をインポートします:
        
        import fastDeepEqual from 'fast-deep-equal/es6/react';
        
    -   deepEqual関数の使用をfastDeepEqual関数に置き換えます:
        
        if (fastDeepEqual(prevProps.route, nextProps.route)) return true;
        

## JSS Next.jsアプリをJSS 21.7にアップグレードする

JSS 21.7では、Sitecoreが[GraphQLのリトライを改善し、Next.jsをバージョン14にアップグレードしました](https://github.com/Sitecore/jss/releases/tag/v21.7.0)。

JSS Next.jsアプリのアップグレード:

-   [JSS Next.jsアプリ用には、JSS 21.6.4から21.7への詳細なアップグレードガイド](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 "Upgrade JSS 21.6.4 Next.js apps to version 21.7")に従ってください。

## NodeのヘッドレスSSRプロキシアプリを更新してください

JSS 21.7では、NodeのヘッドレスSSRプロキシテンプレートがレイアウトサービスリクエストにsc\_siteクエリパラメータを追加します。

NodeのヘッドレスSSRプロキシアプリを更新するには:

-   /src/config.tsファイル内で、qsParams設定プロパティを使ってレイアウトサービスリクエストのクエリ文字列パラメータを追加します。
    
    setHeaders: (\_req, \_serverRes, proxyRes) => {
     delete proxyRes.headers'content-security-policy';
     },
     /\*\*
    \* Query string parameters to add to Layout Service requests.
    \*/
    qsParams: sc\_site=${siteName},
    //...