- Next.js
JSS 21.7のNext.jsアプリをバージョン21.10にアップグレードしてください
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
このガイドでは、バージョン21.10の改善を活用するために既存のNext.js JSS 21.7アプリケーションに加えるべきほとんどの変更点をカバーしています。ただし、このプロセスにはReactをバージョン19 、Next.jsをバージョン15に更新する必要があるため、各フレームワークの該当ガイドを参照してアプリのアップグレードプロセスを完了する必要があります。
JavaScriptやNext.jsアプリケーション開発の性質上、このガイドは既存のアプリケーションで可能なすべてのカスタマイズをカバーしていません。
アップグレード時には、Next.jsアプリケーションを作成する際に使ったJSSテンプレートやアドオンを考慮してください。それらはpackage.jsonファイルで見つけることができます。例えば、JSS 21.7アプリケーションでは以下のテンプレートやアドオンが使われることがあります:
- nextjs
- nextjs-styleguideまたは nextjs-sxa
- nextjs-multisite
!注始める前に
まだなら、アプリをJSS 21.7にアップグレードしてください。
これらの新バージョンで何が変更されたのかを理解するために、React 19およびNext.js 15の公式リリースノートを読むことをお勧めします。
変更ログに慣れておきましょう。アプリケーションが大幅にカスタマイズされている場合、変更ログはこのトピックで扱われていない追加の変更点の指針を提供します。
このトピックでは、以下の方法を説明します:
- 既存のアプリでアプリケーション依存関係を更新する
- JSS 21.10 Next.jsアプリケーションを作成する
- 既存のアプリでNext.jsテンプレートファイルを更新してください
- SXAアドオンの更新:::
既存のアプリでアプリケーション依存関係を更新する
アップグレードしたアプリケーションを正しく動作させるには、依存関係を更新する必要があります。
依存関係を更新するには:
-
既存のアプリケーションのpackage.jsonファイルでは:
-
すべての @sitecore-jssパッケージをバージョン ~21.10.0に更新してください。
-
以下の依存関係を指定されたバージョンに更新します:
"graphql": "~15.10.1", "next": "^15.3.1", "react": "^19.1.0", "react-dom": "^19.1.0", "@types/react": "^19.1.2", "@types/react-dom": "^19.1.3", "eslint-plugin-react": "^7.37.5",
-
-
以下のコマンドで依存関係をインストールします:
npm install
JSS 21.10 Next.jsアプリケーションを作成する
アップグレードのプロセスをできるだけ簡単にするために、JSS 21.10のNext.jsアプリケーションを作成しましょう。このアプリから既存のアプリにファイルをコピーできます。
JSS 21.10 Next.jsアプリケーションを作成するには:
-
コンソールでは、次のコマンドを実行します:
npx [email protected] nextjs
-
[email protected]パッケージをインストールするよう促された場合、yに答えてください。
-
JSS 21.10 Next.jsアプリのフォルダパスを入力します。例えば、*./jss2110*と入力すると、現在の作業ディレクトリ内にアプリフォルダが作成されます。
-
残りのプロンプトに従い、既存のアプリケーションと同じデータ取得(GraphQLまたはREST)とプリレンダリング(SSGまたはSSR)を選択してください。
-
Sitecore XM Cloud用に構築しているか尋ねられたら、nと答えてください。
-
既存のアプリケーションで使っている他のアドオンを選択し、Enterキーを押してください。
スクリプトはその後、アプリケーションの依存関係をインストールします。
既存のアプリでNext.jsテンプレートファイルを更新してください
これは、既存のアプリケーション内のファイルを新しいJSS 21.10アプリの対応ファイルと同期する方法を説明しています。
Next.jsテンプレートファイルの更新:
-
JSX名前空間を使用するすべてのコンポーネント(例えばJSX.Element型が存在する場合)に対して、reactからJSXインポートを追加します。
-
src/Bootstrap.tsxファイルでは、既存のreactインポートは次のような形になるかもしれません:
import { useEffect } from 'react';
-
その場合、JSXを加えて以下のものを作成します。
import { useEffect, JSX } from 'react';
!ヒントもしこれらのファイルを以前にカスタマイズしていなければ、テンプレートアプリのバージョンに置き換えることができます。
-
SXAアドオンの更新
SXAアドオンのアップデート:
-
src/assets/sass/components/_component-column-splitter.scssファイルをカスタマイズしていなければ、テンプレートアプリのバージョンに置き換えてください。そうでなければ、以下の手順を踏みます。
-
以下のパディングルールを見つけてください:
padding-left: $default-padding / 2; padding-right: $default-padding / 2;
-
これらのルールを以下のものに置き換えてください:
padding-left: $default-padding * 0.5; padding-right: $default-padding * 0.5;
-
-
/src/assets/sass/components/promo/_promo-shadow.scssファイルをカスタマイズしていなければ、テンプレートアプリのバージョンに置き換えてください。そうでなければ、以下の例のようにCSS文を@include respond-to(all-mobile)ブロックの上に再配置してください。
-
CSS文(padding、margin)の過去:
...
.component-content { @include respond-to(all-mobile) { margin: 0 10px 30px 10px; } padding: 15px; margin: 0 0 30px 0; &
, & { ... -
両方を移動した後のCSS文:
...
.component-content { padding: 15px; margin: 0 0 30px 0; @include respond-to(all-mobile) { margin: 0 10px 30px 10px; } &
, & { ...
-
-
src/lib/next-config/plugins/sass.jsファイルをカスタマイズしていなければ、テンプレートアプリのバージョンに置き換えてください。そうでなければ、sassOptions設定に以下の追加プロパティを追加してください:
sassOptions: { ... quietDeps: true, silenceDeprecations: "import", "legacy-js-api", },
!注この変更は、Bootstrapからの廃止警告を抑制するための一時的な修正sassです。 bootstrapとfont-awesomeの新しいバージョンがリリースされ警告が終了すると、これら2つのプロパティは削除可能です。
今後のステップ
アップグレードプロセスを最終決定するには、発生したエラーや警告を必ず解決してください。必要に応じて、JSS固有の問題に対してデバッグログを有効にし てください。