---
title: "JSSアプリをJSS 21.6にアップグレードする"
slug: "upgrade-jss-apps-to-jss-21-6"
abstract: "このガイドに従ってJSSアプリをJSS 21.6にアップグレードしてください。AngularアプリはAngular 16にアップグレードします。Next.jsアプリは新しいGraphQLリクエストクライアントファクトリーを使用します。"
---
# JSSアプリをJSS 21.6にアップグレードする

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

> !注**始める前に**
> 
> -   [JSS 21.6のリリースノート](https://github.com/Sitecore/jss/releases/tag/v21.6.0)に慣れておきましょう。

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

-   ReactやVueアプリの依存関係や環境変数をアップグレードしましょう。
-   JSS Next.jsアプリをJSS 21.6にアップグレードしてください。
-   JSS AngularアプリをJSS 21.6とAngular 16にアップグレードしてください。

## ReactおよびVueアプリにおける依存関係や環境変数のアップグレード

JSSテンプレートに基づいてアプリケーションをアップグレードするには、依存関係のアップグレードや環境変数名の置き換えが必要です。

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

1.  package.jsonファイルでは、すべての@sitecore-jss依存関係を~21.6.0バージョンに更新してください。
    
2.  アプリケーションのJSS\_APP\_NAME環境変数をSITECORE\_SITE\_NAMEにリネームしてください。
    
3.  もしあなたのアプリケーションがReactまたはNext.jsアプリであれば、@types/react依存関係をバージョン ^18.2.22に更新してください。
    
4.  シェルでは、以下のコマンドを実行してアプリ内の依存関係をインストール/更新します:
    
    npm install
    

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

JSS 21.6では、SitecoreがNext.jsアプリケーションで使用されている [一部のサービスや構成をリファクタリングしました](https://github.com/Sitecore/jss/releases/tag/v21.6.0) 。

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

-   [JSS Next.jsアプリの詳細なアップグレードガイド](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")に従ってください。

## JSS AngularアプリをJSS 21.6およびAngular 16にアップグレードしてください

JSS 21.6では、AngularテンプレートがAngular 16を使用するよう更新されました。

> !注**始める前に**
> 
> -   [JSS 21.6のリリースノート](https://github.com/Sitecore/jss/releases/tag/v21.6.0)に慣れておきましょう。
>     
> -   [Angular 16のリリース概要](https://angular.io/guide/update-to-version-16)を読んでください。
>     

1.  package.jsonファイルでは:
    
    -   [依存関係](https://github.com/Sitecore/jss/pull/1690/files#diff-dfbd921eda87e367bb8ad73c00257881e8f58bcd736d52647ae36dc3fc233cf0L55-R68)と[開発依存関係](https://github.com/Sitecore/jss/pull/1690/files#diff-dfbd921eda87e367bb8ad73c00257881e8f58bcd736d52647ae36dc3fc233cf0L79-R88)をAngular 16にアップグレードしてください。
        
    -   [typescriptパッケージをバージョン~4.9.5に](https://github.com/Sitecore/jss/pull/1690/files#diff-dfbd921eda87e367bb8ad73c00257881e8f58bcd736d52647ae36dc3fc233cf0L128-R128)アップグレードしてください。
        
    -   サーバーアーティファクトパスJSS慣例で求められるものを保持するために、build:serverとスクリプトpostbuild:server更新してください。 package.jsonファイル内でスクリプトを以下に更新してください:
        
        “build:server”: “cross-env-shell ng run <your-app-name>:server:production --output-path=$npm\_package\_config\_buildArtifactsPath --output-hashing=none”,
        "postbuild:server": "move-cli ./dist/main.js ./dist/server.bundle.js"
        
    -   廃止された \--deploy-urlオプションを \--base-href ng buildオプションに置き換えるには、build:clientスクリプトを以下に更新してください:
        
        "build:client": "cross-env-shell ng build --base-href $npm\_package\_config\_sitecoreDistPath/browser/ --output-path=$npm\_package\_config\_buildArtifactsPath/browser/",
        
    -   overrides[の回避策](https://github.com/Sitecore/jss/pull/1690/files#diff-dfbd921eda87e367bb8ad73c00257881e8f58bcd736d52647ae36dc3fc233cf0L131-L146)を削除してください。
        
2.  シェルでは、以下のコマンドを実行してアプリ内の依存関係をインストール/更新します:
    
    npm install
    
3.  angular.jsonファイルでは:
    
    -   allowedCommonJsDependencies[設定](https://github.com/Sitecore/jss/pull/1690/files#diff-dfbd921eda87e367bb8ad73c00257881e8f58bcd736d52647ae36dc3fc233cf0L33-R35)を更新してください。
        
    -   server.options構成では、outputPathプロパティを削除し、outputHashingプロパティをnoneの値を追加します。最終optionsには以下のものを含める必要があります。
        
        "options": {
         "outputPath": "dist/server",
         "main": "server.bundle.ts",
         "tsConfig": "src/tsconfig.server.json",
         "deleteOutputPath": false,
         "outputHashing": "none"
         }
        
4.  .eslintrcファイルでは、廃止された@angular-eslint/ng-cli-compatESLintルールをこの[diff](https://github.com/Sitecore/jss/pull/1690/files#diff-f1fc7f9603e35cf9c725577465f715f490f08e8dc11f26adb69d8105f4e6ddccL19-R19)に示すように@angular-eslint/recommendedルールに置き換え、[他の古いルール](https://github.com/Sitecore/jss/pull/1690/files#diff-f1fc7f9603e35cf9c725577465f715f490f08e8dc11f26adb69d8105f4e6ddccL40-L52)を削除してください。
    
5.  /src/app/app.module.tsでは、以下の変更を加えます。
    
    -   @angular/platform-browserパッケージからBrowserModuleとインポートTransferStateを削除し、代わりに次のインポート文を追加してください:
        
        import { APP\_ID, NgModule, TransferState } from '@angular/core';
        
    -   @angular/coreパッケージからNgModuleインポートを削除してください。
        
    -   NgModuleデコレーターのimportsセットでBrowserModule.withServerTransition({ appId: 'my-app' })インポートを削除してください。
        
    -   NgModuleデコレーター、providersセットに以下を追加してください:
        
        // The token is needed in cases when multiple applications are bootstrapped on a page
        { provide: APP\_ID, useValue: 'my-app' },
        
6.  Angular専用のアップグレードニーズについては[Angular 15から16へのアップグレードガイド](https://update.angular.io/?l=3&v=15.0-16.0) を参照し、アプリケーションカスタマイズの変更を実装してください。