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

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

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

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

1. 既存のアプリケーションのpackage.jsonファイルで、以下の手順を踏みます:

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

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

   npm install

3. 以下のコマンドを使ってsharp画像処理ライブラリのバージョン0.32.6をインストールすることを強くお勧めします。これは画像最適化機能のメモリ使用効率を改善するためのものです:

   npm i [email protected]

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

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

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

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

   npx [email protected] nextjs

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

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

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

5. Sitecore XM Cloud用にビルドしているか尋ねられたら、XM Cloudアドオンのインストールをスキップするためにnと答えてください。

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

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

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

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

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

1. scripts/generate-config.tsファイルをカスタマイズしていなければ、22.1バージョンに置き換えてください。それ以外の場合は、以下のようにファイルを修正してください。

   • configTextプロップ割り当てでは、configprop?の後にtrimメソッド呼び出しを追加します。

     configprop?.trim()

   • その割り当ての最後に、改行文字の前のコンマをセミコロンに置き換えます。

     // Before }',\n`;

     // After }';\n`;

   以下はJSS 22.1に適した更新された割り当ての例です:

   configText += `config.${prop} = process.env.${constantCase(prop)} || '${configprop?.trim()}';\n`;

2. lib/next-config/plugins/cors-headerプラグインをカスタマイズしていなければ、22.1バージョンに置き換えてください。それ以外の場合は、以下のようにファイルを修正してください:

   • クロスオリジンリソース共有(CORS)は現在APIハンドラやミドルウェアによって処理されるため、APIエンドポイントの以下のCORSヘッダーを削除してください:

     { source: '/api/

     *', headers: { key: 'Access-Control-Allow-Origin', value: config.sitecoreApiHost.replace(/\/$/, ''), }, , },

3. ComponentConsumerPropsが削除されたため、もしそれを参照するimport文があれば、すべてWithSitecoreContextPropsに更新してください。

4. resolvePageUrl関数がオブジェクトを受け入れ、serverUrlがオプションになったため、ページ用のメタデータ編集モードが有効であれば後者は省略されます。pages/api/editing/render.tsファイルをカスタマイズしていて、現在resolvePageUrl関数をEditingRenderMiddlewareに渡している場合は、以下のようにファイルを修正してください。

   • 既存のハンドラ初期化を以下に置き換えます:

     const handler = new EditingRenderMiddleware({ resolvePageUrl: ({ serverUrl, itemPath }) => `${serverUrl}${itemPath}`, }).getHandler();

   !注pages/api/editing/render.tsをカスタマイズしていなければ、このリリースで新しい変更を加える必要はありません。

5. もしアプリに現在は廃止されたEditingComponentPlaceholderやRenderingType列挙数への参照が含まれている場合(例えば ...path.tsxの以下の例のように)、それらを削除してください。

   import Layout from 'src/Layout'; import { RenderingType, EditingComponentPlaceholder } from '@sitecore-jss/sitecore-jss-nextjs'; ... const isComponentRendering = layoutData.sitecore.context.renderingType === RenderingType.Component; ... {isComponentRendering ? ( ) : ( )}

SXAアドオンの更新

SXAアドオンのアップグレード:

• 以下のファイルを22.1アプリの新しいバージョンに置き換えてください:
  • src/components/Image.tsx 
  • src/components/Promo.tsx 
  • src/components/Title.tsx 
  • src/assets/sass/components/title/_component-title.scss

編集ユーティリティのインポートパスを置き換えてください

現在は @sitecore-jss/sitecore-jss/utilsにあるすべての編集ユーティリティを移動しますので、もしimport文でこのパスを参照している場合は、新しいパス @sitecore-jss/sitecore-jss/editingを使うように更新する必要があります。

この変更は以下のユーティリティに影響を与えます:

• ChromeCommand 
• DefaultEditFrameButton 
• DefaultEditFrameButtonIds 
• DefaultEditFrameButtons 
• EditButtonTypes 
• EditFrameDataSource 
• ExperienceEditor 
• FieldEditButton 
• handleEditorAnchors 
• HorizonEditor 
• isEditorActive 
• mapButtonToCommand 
• Metadata 
• resetEditorChromes 
• WebEditButton

!警告古いルートは次のJSSリリースまでしか機能しません。したがって、必要な変更をできるだけ早く行うことを強くお勧めします。

今後のステップ

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