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

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

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

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

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

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

  • nextjs 

  • nextjs-sxa 

  • nextjs-multisite 

始める前に

  • まだアップグレードしていない場合は、アプリをJSS 22.0.0にアップグレードします。

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

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

  1. 既存のアプリのアプリケーションの依存関係を更新します。

  2. JSS 22.1 Next.jsアプリケーションを作成します。

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

  4. SXAアドオンを更新します。

  5. 編集ユーティリティのインポートパスを置き換えます。

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

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

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

  1. 既存のアプリケーションのpackage.jsonファイルで、次の操作を行います。

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

    • @types/nodeパッケージをバージョン ^20.14.2に更新します。

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

    npm install

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

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

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

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

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

  2. [email protected]パッケージをインストールするように求められた場合は、y.

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

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

  5. Sitecore XM Cloud向けにビルドしているかどうか尋ねられたら、nと答えて、XM Cloudアドオンのインストールをスキップします。

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

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

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

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

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

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

    • configText propの割り当てで、次のようなtrimメソッド呼び出しをconfigprop?の後に追加します。

      config[prop]?.trim()

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

      // Before
}',\n`;

// After
}';\n`;

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

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

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

    • クロスオリジンリソース共有 (CORS) がAPIハンドラーまたはミドルウェアによって処理されるようになったため、APIエンドポイントの次のCORSヘッダーを削除します。

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

  3. ComponentConsumerPropsが削除されたため、それを参照するimportステートメントがある場合は、代わりにWithSitecoreContextPropsを使用するようにすべて更新してください。

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

    • 既存のハンドラの初期化を次のように置き換えます。

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

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

  5. 次の ...path.tsxの例のように、非推奨となったEditingComponentPlaceholderまたはRenderingType列挙型への参照がアプリに含まれている場合は、それらを削除します。

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

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固有の問題のデバッグ ログを有効にします 。

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