Sitecore JavaScript Next.jsのレンダリングSDK (JSS)

JSS 22.3 Next.jsアプリをバージョン22.4にアップグレードする

Version:

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

このトピックでは、バージョン22.4の最新の改良点を活用するために、既存のJSS 22.3アプリケーションに加える必要があるほとんどの変更について説明します。ただし、JavaScriptとNext.jsアプリケーション開発の性質上、このトピックでは、既存のアプリケーションでのカスタマイズをすべて考慮しているわけではありません。

JSSの22.4リリースでは、すべてのコア @sitecore-jssパッケージからAxios依存関係が削除されています。この依存関係はJSSのコア機能に深く根付いており、その削除により、ネイティブのNodeフェッチ、代替フェッチライブラリ、または現在のセキュリティ修正や機能を含むAxiosの最新バージョンの1つを介して、JSSアプリがSitecoreと通信する方法の柔軟性が向上します。

メモ

デフォルトのフェッチャーとしてのAxiosの削除に関連する変更の完全な概要については、関連するchangelogエントリを参照してください。

アップグレードの際は、Next.jsアプリケーションの作成時に使用したJSSテンプレートとアドオンを考慮してください。これらはpackage.jsonファイルにあります。たとえば、JSS 22.3アプリケーションでは、次のテンプレートとアドオンを使用できます。

nextjs
nextjs-styleguide
nextjs-multisite

始める前に

まだアップグレードしていない場合は、アプリをJSS 22.3にアップグレードします。
変更ログに慣れてください。アプリケーションが高度にカスタマイズされている場合、変更ログは、このトピックで説明されていない追加の変更に関するガイダンスを提供できます。

このトピックでは、次の方法について説明します。

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

アップグレードしたアプリケーションを正しく動作させるには、依存関係を更新する必要があります。

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

既存のアプリケーションのpackage.jsonファイルで、すべての @sitecore-jssパッケージをバージョン ~22.4.0に更新します。
次のコマンドを使用して依存関係をインストールします。
npm install

nextjs-styleguide-trackingアドオンを更新する

nextjs-styleguide-trackingアドオンをアップグレードするには:

src/data-fetcher.tsで、次の手順を実行します。

AxiosDataFetcherとAxiosResponse importステートメントを見つけます。

そのステートメントを削除し、次のように置き換えます。

import { NativeDataFetcher, NativeDataFetcherResponse } from '@sitecore-jss/sitecore-jss-nextjs';

dataFetcher関数を見つけます。

その関数を削除し、次のように置き換えます。

export async function dataFetcher<ResponseType>(
  url: string,
  data?: unknown
): Promise<NativeDataFetcherResponse> {
  return new NativeDataFetcher().fetch<ResponseType>(url, data);
}

次のステップ

アプリケーションの残りの部分全体で、他のAxios importステートメントを次のように置き換えます。

既存のインポート	交換輸入
AxiosDataFetcher	NativeDataFetcher
AxiosResponse	NativeDataFetcherResponse
AxiosDataFetcherConfig	NativeDataFetcherConfig

アップグレードプロセスを完了するには、発生したエラーや警告を必ず解決してください。必要に応じて、JSS固有の問題のデバッグログを有効にします。

この記事を改善するための提案がある場合は、お知らせください!