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

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

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

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

1. 既存のアプリケーションのpackage.jsonファイルでは:

   • すべての @sitecore-jssパッケージをバージョン ~22.7.0に更新してください。

   • 以下の依存関係を指定されたバージョンに更新します:

     "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",

2. 以下のコマンドで依存関係をインストールします:

   npm install

JSS 22.7 Next.jsアプリケーションを作成する

アップグレードプロセスをできるだけ簡単にするために、JSS 22.7 Next.jsアプリケーションを作成しましょう。このアプリから既存のアプリにファイルをコピーできます。

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

1. コンソールでは、次のコマンドを実行します:

   npx [email protected] nextjs

2. [email protected]パッケージをインストールするよう促された場合、yに答えてください。

3. JSS 22.7 Next.jsアプリのフォルダパスを入力します。例えば、*./jss227*と入力して現在のワーキングディレクトリにアプリフォルダを作成します。

4. 残りのプロンプトに従い、既存のアプリケーションと同じデータ取得(GraphQLまたはREST)とプリレンダリング(SSGまたはSSR)を選択してください。

5. Sitecore XM Cloud用に構築しているか尋ねられたら、nと答えてください。

6. 既存のアプリケーションで使っている他のアドオンを選択し、Enterキーを押してください。

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

既存のアプリでNext.jsテンプレートファイルを更新してください

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

Next.jsテンプレートファイルの更新:

• JSX名前空間を使用するすべてのコンポーネント(例えばJSX.Element型が存在する場合)に対して、reactからJSXインポートを追加します。

  • src/Bootstrap.tsxファイルでは、既存のreactインポートは次のような形になるかもしれません:

    import { useEffect } from 'react';

  • その場合、JSXを加えて以下のものを作成します。

    import { useEffect, JSX } from 'react';

  !ヒントもしこれらのファイルを以前にカスタマイズしていなければ、テンプレートアプリのバージョンに置き換えることができます。

SXAアドオンの更新

SXAアドオンのアップデート:

1. 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;

2. /src/assets/sass/components/promo/_promo-shadow.scssファイルをカスタマイズしていなければ、テンプレートアプリのバージョンに置き換えてください。そうでなければ、以下の例のようにCSS文を@include respond-to(all-mobile)ブロックの上に再配置してください。

   • CSSの以前の記述:

     ...

     .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; } &

     , &

     { ...

3. src/lib/next-config/plugins/sass.jsファイルをカスタマイズしていなければ、テンプレートアプリのバージョンに置き換えてください。そうでなければ、sassOptions設定に以下の追加プロパティを追加してください:

   sassOptions: { ... quietDeps: true, silenceDeprecations: "import", "legacy-js-api", },

   !注この変更は、Bootstrapからの廃止警告を抑制するための一時的な修正sassです。 bootstrapとfont-awesomeの新しいバージョンがリリースされ警告が終了すると、これら2つのプロパティは削除可能です。

自動GraphQLコード生成を無効にしてください

このセクションでは、メンテナンス終了のgraphql-letパッケージに基づくアプリのデフォルトの自動コード生成ロジックを削除する方法について説明します。特に継続する必要がない限り、これを強くお勧めしますgraphql-let。 graphql-codegenを使って手動でコード生成を実装したい場合は、ガイド に従って方法を学びましょう。

!重要すべてのアップグレードステップと同様に、このセクションの変更を行う前に、自分のアプリにカスタマイズを加える際にどのような影響があるかを認識してください。これらの指示には、graphql-codegen依存関係の除去が含まれており、手動コード生成を実装する予定がある場合は、そのままにしておくことを検討するかもしれません。

自動GraphQLコード生成を無効にするには:

1. 既存のアプリケーションのpackage.jsonファイルでは:

   • 以下の依存関係を削除してください:

     "@graphql-typed-document-node/core": "^3.2.0", "graphql-let": "^0.18.6",

   • graphql-codegenで手動でコード生成を実装する予定がない場合は、以下の依存関係も削除してください:

     "graphql": "~15.8.0", "graphql-tag": "^2.12.6", "@graphql-codegen/cli": "^5.0.0", "@graphql-codegen/import-types-preset": "^3.0.0", "@graphql-codegen/plugin-helpers": "^5.0.1", "@graphql-codegen/typed-document-node": "^5.0.1", "@graphql-codegen/typescript": "^4.0.1", "@graphql-codegen/typescript-operations": "^4.0.1", "@graphql-codegen/typescript-resolvers": "^4.0.1",

   • GraphQLの内省データ取得に、例えば 手動でGraphQLコード生成を行う際に以下のスクリプトを使いたい場合は、削除してください。

     "graphql

     ": "ts-node --project tsconfig.scripts.json ./scripts/fetch-graphql-introspection-data.ts",

   • bootstrapスクリプトがgraphql-letを参照する場合は、その参照を削除してください。以下の例は、graphql-letコールが削除された有効なbootstrapスクリプトを示しています:

     "bootstrap": "ts-node --require dotenv-flow/config --project tsconfig.scripts.json scripts/bootstrap.ts",

   !注これらの変更を行ったら、アプリの依存関係を更新するためにnpm installを再度実行してください。

2. graphql-letに関連する以下のファイルを削除してください:

   • .graphql-let.yml
   • /scripts/fetch-graphql-introspection-data.ts
   • /src/temp/GraphQLIntrospectionResult.json

3. tsconfig.jsonファイルをカスタマイズしていなければ、テンプレートアプリのバージョンに置き換えてください。そうでなければ、compilerOptions.pathsから以下の項目を削除してください:

   "graphql-types": "node_modules/@types/graphql-let/__generated__/__types__",

今後のステップ

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