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

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

Version:

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

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

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

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

nextjs
nextjs-styleguide
nextjs-multisite

始める前に

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

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

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

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

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

既存のアプリケーションのpackage.jsonファイルで、次のパッケージを指定されたバージョンに更新します。

すべての @sitecore-jssパッケージをバージョン ~22.3.0に更新します。

次のパッケージを記載されているバージョンに更新します。

テーブル4。

パッケージ	新しいバージョン
@types/node	^22.9.0
@typescript-eslint/eslint-plugin	^8.14.0
@typescript-eslint/parser	^8.14.0
eslint	^8.56.0
typescript	~5.4.0

次のコマンドを使用して依存関係をインストールします。
npm install

.eslintrcで、次のルールを追加するか、既存のルールを一致するように変更します。

"@typescript-eslint/no-unused-vars": [
  "error",
  {
    "caughtErrorsIgnorePattern": "."
  }
],

tsconfig.jsonで、"lib"エントリのすぐ上に、以下を追加します。
... "types": ["node"], ...

JSS 22.3 Next.jsアプリケーションの作成

アップグレードプロセスをできるだけ簡略化するには、JSS 22.3 Next.jsアプリケーションを作成します。その後、このアプリから既存のアプリに一部のファイルをコピーできます。

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

コンソールで、次のコマンドを実行します。
npx [email protected] nextjs
[email protected]パッケージをインストールするように求められた場合は、y.
JSS 22.3 Next.jsアプリのフォルダーパスを入力します。例えば、「 ./jss223」と入力すると、現在の作業ディレクトリにappフォルダが作成されます。
残りのプロンプトに従って、既存のアプリケーションと同じデータ取得 (GraphQLまたはREST) とプリレンダリング (SSGまたはSSR) のオプションを選択します。
Sitecore XM Cloud向けにビルドしているかどうか尋ねられたら、nと答えて、XM Cloudアドオンのインストールをスキップします。
既存のアプリケーションで使用されている他のアドオンを選択し、Enterキーを押します。

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

既存のアプリのNext.jsテンプレートファイルを更新する

ここでは、既存のアプリケーションのファイルを新しいJSS 22.3アプリケーションの対応するファイルと同期する方法について説明します。

Next.jsテンプレートファイルを更新するには:

scripts/config/plugins/scjssconfig.tsファイルをカスタマイズしていない場合は、22.3バージョンに置き換えてください。それ以外の場合は、次のようにファイルを変更します。
- 次のコードを見つけます。
  try { scJssConfig = require('scjssconfig.json'); } catch (e) { ...
- 次のようにESLintルールの上書きを追加して変更します。
  try { // eslint-disable-next-line @typescript-eslint/no-require-imports scJssConfig = require('scjssconfig.json'); } catch (e) { ...
scripts/generate-component-builder/index.tsファイルをカスタマイズしていない場合は、22.3バージョンに置き換えてください。それ以外の場合は、次のようにファイルを変更します。
- 次のルールを見つけます。
  // eslint-disable-next-line @typescript-eslint/no-var-requires
- 次のように置き換えます。
  // eslint-disable-next-line @typescript-eslint/no-require-imports
scripts/scaffold-component/index.tsファイルをカスタマイズしていない場合は、22.3バージョンに置き換えてください。それ以外の場合は、次のようにファイルを変更します。
- 次のルールを見つけます。
  // eslint-disable-next-line @typescript-eslint/no-var-requires
- 次のように置き換えます。
  // eslint-disable-next-line @typescript-eslint/no-require-imports
scripts/config/index.tsファイルをカスタマイズしていない場合は、22.3バージョンに置き換えてください。それ以外の場合は、次のようにファイルを変更します。
- 次のルールを見つけます。
  // eslint-disable-next-line @typescript-eslint/no-var-requires
- 次のように置き換えます。
  // eslint-disable-next-line @typescript-eslint/no-require-imports
scripts/utils.tsファイルをカスタマイズしていない場合は、22.3バージョンに置き換えてください。それ以外の場合は、次のようにファイルを変更します。
- 次の項目を見つけます。
  cb && cb(name);
- 次のように置き換えます。
  if (cb) cb(name);

Nextjs-styleguideアドオンを更新する

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

src/lib/sitemap-fetcher/plugins/disconnected-sitemap-service.tsファイルをカスタマイズしていない場合は、22.3バージョンに置き換えてください。それ以外の場合は、次のように変更します。
- 次のルールを見つけます。
  // eslint-disable-next-line @typescript-eslint/no-var-requires
- 次のように置き換えます。
  // eslint-disable-next-line @typescript-eslint/no-require-imports

次のステップ

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

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