---
title: "JSS 21.5のNext.jsアプリをバージョン21.6にアップグレードしてください"
slug: "upgrade-jss-21-5-next-js-apps-to-version-21-6"
abstract: "JSS 21.6は、すべてのGraphQLベースのサービスのクライアント管理を統合しています。"
---
# JSS 21.5のNext.jsアプリをバージョン21.6にアップグレードしてください

JavaScriptレンダリングSDKs(JSS)21.6は、すべてのGraphQLベースのサービスのクライアント管理を統合し、一部のサービスや設定をリファクタリングします。

このトピックでは、既存のJSS 21.5アプリケーションで新機能を活用するために行うべきほとんどの変更点をカバーします。

JavaScriptやNext.jsアプリケーション開発の性質上、このガイドでは既存のアプリケーションで可能なすべてのカスタマイズをカバーできません。

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

-   nextjs 
-   nextjs-sxa 
-   nextjs-multisite

> !注**始める前に**
> 
> -   [変更履歴](https://github.com/Sitecore/jss/releases/tag/v21.6.0)に慣れておきましょう。もしアプリケーションが大幅にカスタマイズされている場合、追加で必要な変更のヒントを得るために参照する必要があるかもしれませんが、これはこのトピックで触れられないかもしれません。

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

-   既存のアプリでアプリケーションの依存関係を更新してください。
-   既存のアプリの環境変数を更新してください。
-   JSS 21.6 Next.jsアプリケーションを作成しましょう。
-   既存のアプリ内のNext.jsテンプレートファイルを更新してください。
-   SXAアドオンファイル(存在する場合)を更新してください。
-   マルチサイトアドオンファイルを更新してください。

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

既存のアプリケーションを正しく動作させ、新しい機能を使うためには、依存関係を更新する必要があります。

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

1.  既存のアプリケーションのpackage.jsonファイルでは:
    
    -   すべての @sitecore-jss パッケージをバージョン ~21.6.0に更新してください。
    -   @types/reactを更新して ^18.2.22。
2.  以下のコマンドで依存関係をインストールします:
    
    npm install
    

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

更新された設定スクリプトには新しい環境変数が必要です。

新しい環境変数をアプリケーションに提供するには、.envファイルを以下のように変更してください:

-   JSS\_APP\_NAME環境変数をSITECORE\_SITE\_NAMEにリネームしてください。これは任意です。

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

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

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

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

1.  コンソールでは、次のコマンドを実行します:
    
    npx create-sitecore-jss@^21.6.0 nextjs
    
2.  create-sitecore-jss@21.6.0パッケージをインストールするよう促された場合、*y*に答えてください。
    
3.  JSS 21.6 Next.jsアプリのフォルダパスを入力します。例えば、現在の作業ディレクトリ内のアプリフォルダを作成するには *、./jss216*と入力してください。
    
4.  残りのプロンプトに従い、既存のアプリケーションと同じデータ取得(GraphQLまたはREST)とプリレンダリング(SSGまたはSSR)のオプションを選択してください。
    
5.  Sitecore XM Cloud用にビルドしているか尋ねられたら、XM Cloudアドオンのインストールをスキップするために*n*と答えてください。
    
6.  既存のアプリケーションで使っているアドオンを選択してください。 nextjs-sxaやnextjs-multisiteを押してEnterキーを押します。
    

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

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

この手順では、既存のアプリケーションのファイルをJSS 21.6アプリ対応のファイルに置き換えるか、JSS 21.6アプリファイルをガイドとして既存のアプリファイルを修正します。

Next.jsテンプレートファイルを以下のように更新してください:

1.  既存のアプリケーションの /scripts/generate-config.tsファイルを21.6バージョンに置き換えてください。
    
2.  既存のアプリケーションの /src/lib/next-config/plugins/cors-header.jsファイルを21.6バージョンに置き換えてください。
    
3.  21.6アプリの /src/lib/graphql-client-factory/ フォルダを既存のアプリにコピーしてください。
    
4.  21.6アプリの /src/lib/config.tsファイルを既存のアプリにコピーしてください。
    
5.  /src/lib/dictionary-service-factory.tsファイルをカスタマイズしていなければ、21.6バージョンに置き換えてください。それ以外の場合は、以下のように修正してください:
    
    -   以下のインポートステートメントを追加してください:
        
        import clientFactory from 'lib/graphql-client-factory';
        
    -   以下のGraphQLDictionaryService構成オプションを見つけてください:
        
        {
         endpoint: config.graphQLEndpoint,
         apiKey: config.sitecoreApiKey,
         siteName,
         retries:
         (process.env.GRAPH\_QL\_SERVICE\_RETRIES &&
         parseInt(process.env.GRAPH\_QL\_SERVICE\_RETRIES, 10)) ||
         0,
        }
        
    -   そのコードブロックを以下のものに置き換えます。
        
        {
         clientFactory,
         siteName,
         retries:
         (process.env.GRAPH\_QL\_SERVICE\_RETRIES &&
         parseInt(process.env.GRAPH\_QL\_SERVICE\_RETRIES, 10)) ||
         0,
        }
        
6.  /src/lib/layout-service-factory.tsファイルをカスタマイズしていなければ、21.6バージョンに置き換えてください。それ以外の場合は、以下のように修正してください:
    
    -   以下のインポートステートメントを追加してください:
        
        import clientFactory from 'lib/graphql-client-factory';
        
    -   以下のGraphQLLayoutService構成オプションを見つけてください:
        
        {
         endpoint: config.graphQLEndpoint,
         apiKey: config.sitecoreApiKey,
         siteName,
         retries:
         (process.env.GRAPH\_QL\_SERVICE\_RETRIES &&
         parseInt(process.env.GRAPH\_QL\_SERVICE\_RETRIES, 10)) ||
         0,
        }
        
    -   そのコードブロックを以下のものに置き換えます。
        
        {
         clientFactory,
         siteName,
         retries:
         (process.env.GRAPH\_QL\_SERVICE\_RETRIES &&
         parseInt(process.env.GRAPH\_QL\_SERVICE\_RETRIES, 10)) ||
         0,
        }
        
7.  /src/pages/\_app.tsxファイルでは、以下の手順を踏みます:
    
    -   以下のインポートステートメントを追加してください:
        
        import Bootstrap from 'src/Bootstrap';
        
    -   Bootstrapコンポーネントをアプリのレンダリング関数に追加してください。例えば:
        
        return (
         <>
         <Bootstrap {...pageProps} />
         <I18nProvider lngDict={dictionary} locale={pageProps.locale}>
         <Component {...rest} />
         </I18nProvider>
         </>
         );
        
8.  /next.config.jsファイルで、getPublicUrl関数のインポートを削除し、関数の呼び出しをjssConfig.publicUrlに置き換えます。
    
9.  /scripts/configフォルダ内の残りのファイルを21.6バージョンに置き換えてください。
    
10.  /src/Layout.tsxと/src/Navigation.tsxファイルでは以下のことができます。
     
     -   configオブジェクトをインポートする:
         
         import config from 'temp/config';
         
     -   publicUrl定数の値を生成するためにgetPublicUrl関数を使う代わりに、configオブジェクトの値に置き換えてください。
         
         const publicUrl = config.publicUrl;
         
     -   import { getPublicUrl } from '@sitecore-jss/sitecore-jss-nextjs/utils';文を削除してください。
         
11.  /src/lib/page-props-factory/plugins/content-styles.tsファイルがあれば削除してください。
     

## SXAアドオンファイルの更新

SXAアドオン(存在する場合)をアップグレードするには:

1.  /src/assets/sassフォルダを21.6バージョンに置き換えてください。
    
2.  /src/lib/middleware/plugins/redirects.tsファイルをカスタマイズしていなければ、21.6バージョンに置き換えてください。それ以外の場合は、以下のように修正してください:
    
    -   以下のインポートステートメントを追加してください:
        
        import clientFactory from 'lib/graphql-client-factory';
        
    -   以下のRedirectsMiddleware構成オプションを見つけてください:
        
        {
         endpoint: config.graphQLEndpoint,
         apiKey: config.sitecoreApiKey,
         locales: 'en',
         excludeRoute: () => false,
         disabled: () => process.env.NODE\_ENV === 'development',
         siteResolver,
        }
        
        そのコードブロックを以下のものに置き換えます。
        
        {
         clientFactory,
         locales: 'en',
         excludeRoute: () => false,
         disabled: () => process.env.NODE\_ENV === 'development',
         siteResolver,siteName,
         retries:
         (process.env.GRAPH\_QL\_SERVICE\_RETRIES &&
         parseInt(process.env.GRAPH\_QL\_SERVICE\_RETRIES, 10)) ||
         0,
        }
        
3.  /src/pages/api/sitemap.tsルートをカスタマイズしていなければ、21.6バージョンに置き換えてください。それ以外の場合は、getPublicUrlユーティリティ関数のインポート文を削除し、reqtHostとreqProtocolの2つの新しい定数を作成します。これらを使ってページロケーターを構築してください:
    
    const reqtHost = req.headers.host;
     const reqProtocol = req.headers'x-forwarded-proto' || 'https';
     const SitemapLinks = sitemaps
     .map((item) => {
     const parseUrl = item.split('/');
     const lastSegment = parseUrlparseUrl.length - 1;
     return \`<sitemap>
     <loc>${reqProtocol}://${reqtHost}/${lastSegment}</loc>
     </sitemap>\`;
     })
     .join('');
    
4.  /src/pages/404.tsxと/src/pages/500.tsxファイルをカスタマイズしていなければ、21.6バージョンに置き換えてください。それ以外の場合は、getStaticProps機能でインポートして、GraphQLErrorPagesServiceインスタンス化のendpointやapiKeyオプションの代わりに、GraphQL Request client factoryを使いましょう。
    
    import clientFactory from 'lib/graphql-client-factory';
    
    export const getStaticProps: GetStaticProps = async (context) => {
     // other code
     const errorPagesService = new GraphQLErrorPagesService({
     clientFactory,
     siteName: site.name,
     language: context.locale || config.defaultLanguage,
     retries:
     (process.env.GRAPH\_QL\_SERVICE\_RETRIES &&
     parseInt(process.env.GRAPH\_QL\_SERVICE\_RETRIES, 10)) ||
     0,
     });
    }
    

## マルチサイトアドオンファイルの更新

新しいGraphQLリクエストクライアントファクトリーを使用するには、JSS Next.jsマルチサイトアドオンが提供するGraphQLサイトマップサービスを更新する必要があります。

Sitemapサービスの更新:

-   /src/lib/sitemap-fetcher/plugins/graphql-sitemap-service.tsファイルをカスタマイズしていなければ、21.6バージョンに置き換えてください。それ以外の場合は、以下の手順を踏みます。
    -   以下のインポートステートメントを追加してください:
        
        import clientFactory from 'lib/graphql-client-factory';
        
    -   クライアント工場でMultisiteGraphQLSitemapServiceインスタンス化のendpointおよびapiKeyオプションを置き換えます:
        
        this.\_graphqlSitemapService = new MultisiteGraphQLSitemapService({
         clientFactory,
         sites: ...new Set(siteResolver.sites.map((site: SiteInfo) => site.name)),
        });