Next.js

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

Version: 22.x

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

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

このトピックでは、既存のJSS 22.1アプリケーションに対して、バージョン22.3の最新改善の恩恵を受けるために必要なほとんどの変更をカバーします。しかし、JavaScriptやNext.jsアプリケーション開発の性質上、既存のアプリケーションで可能なすべてのカスタマイズをこのトピックではカバーしていません。

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

nextjs
nextjs-styleguide
nextjs-multisite

!注始める前に

まだなら、アプリをJSS 22.1にアップグレードしてください。

Nodeをバージョン22以降にアップグレードしてください。

変更ログに慣れておきましょう。アプリケーションが大幅にカスタマイズされている場合、変更ログはこのトピックで扱われていない追加の変更点の指針を提供します。

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

::: walkthrough2.JSS 22.3 Next.jsアプリケーションを作成する3. 既存のアプリ内のNext.jsテンプレートファイルを更新する4.Nextjs-styleguideアドオンを更新する:::

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

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

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

既存のアプリケーションのpackage.jsonファイルで、以下のパッケージを指定されたバージョンに更新してください:
- すべての @sitecore-jssパッケージをバージョン ~22.3.0に更新してください。
- 以下のパッケージを記載されたバージョンに更新してください:
  
  表1。
  
  パッケージ
  
  新バージョン
  
  @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*と入力して現在のワーキングディレクトリにアプリフォルダを作成します。
残りのプロンプトに従い、既存のアプリケーションと同じデータ取得(GraphQLまたはREST)とプリレンダリング(SSGまたはSSR)を選択してください。
Sitecore XM Cloud用にビルドしているか尋ねられたら、XM Cloudアドオンのインストールをスキップするためにnと答えてください。
既存のアプリケーションで使っている他のアドオンを選択し、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固有の問題に対してデバッグログを有効にしてください。

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