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

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

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

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

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. [email protected]パッケージをインストールするよう促された場合、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} /> <Component {...rest} /> </> );

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 ` ${reqProtocol}://${reqtHost}/${lastSegment} `; }) .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)), });