1. Next.js

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

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

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

このトピックでは、バージョン22.10の新機能を活用するために既存のJSS 22.9アプリケーションに加えるべきほとんどの変更点をカバーします。しかし、JavaScriptやNext.jsアプリケーション開発の性質上、既存のアプリケーションで可能なすべてのカスタマイズについては説明していません。

!注JSS 22.10は主にAngular 20のサポートに焦点を当てています。Next.jsの場合、必要なのはアプリを再テストする前に依存関係を更新することです。

アップグレードの際は、Next.jsアプリケーションを作成する際に使用したJSSテンプレートやアドオンを考慮してください。それらはpackage.jsonファイルで見つけることができます。例えば、XM Cloudスターターファウンデーションに含まれるJSS 22.9アプリケーションでは、以下のテンプレートとアドオンを使用しています。

  • nextjs
  • nextjs-styleguide または nextjs-sxa
  • nextjs-multisite

!注XM Cloudは現在SitecoreAIですエンジニアリング資産が更新されている間、一部のコード例、画像、UIラベルは引き続きXM Cloudを使用する場合があります。

!注始める前に

  • まだでなければ、アプリをJSS 22.9にアップグレードしてください。

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

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

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

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

  1. 既存のアプリケーションのpackage.jsonでは、@sitecore-jssパッケージをバージョン ~22.10.0に更新してください。

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

    npm install

JSS Next.jsアプリでエラーページのコンポーネントレベルのデータ取得を有効にする

エラーページ( 404.tsxや500.tsxなど)は、Next.jsスターターテンプレートでコンポーネントレベルのデータ取得をサポートしました。これはオプションステップで、エラーページが通常のページのようにコンポーネント固有のデータを取得・レンダリングできるようにします。

コンポーネントレベルのデータ取得を可能にすることで、エラーページのコンポーネントは標準ページのコンポーネントと同じ仕組みで独自のデータを取得し、静的なコンテンツに依存するのを防ぎます。

JSS Next.jsアプリでエラーページのコンポーネントレベルのデータ取得を有効にするには:

  1. page-props-factory/component-props.tsプラグインファイルから、コンポーネントレベルのデータ取得ロジックをexec()関数から共有場所(例

    /component-props/index.ts)に移動させます。新しいindex.tsファイルには以下を含める必要があります:

    /** * Fetch component props for a given layout data and context * @param {LayoutServiceData} layoutData - The layout data to fetch component props for * @param {GetServerSidePropsContext | GetStaticPropsContext} context - The context to fetch component props for * @returns {ComponentPropsCollection} The component props * @throws {Error} If there are errors during component props fetching */ export async function fetchComponentProps( layoutData: LayoutServiceData, context: GetServerSidePropsContext | GetStaticPropsContext ): Promise { const service = new ComponentPropsService();

    const componentProps = isServerSidePropsContext(context) ? await service.fetchServerSideComponentProps({ layoutData, context, moduleFactory }) : await service.fetchStaticComponentProps({ layoutData, context, moduleFactory });

    const errors = Object.keys(componentProps) .map(id => { const c = componentPropsid as ComponentPropsError; return c?.error ? `\nUnable to get component props for ${c.componentName} (${id}): ${c.error}` : ''; }) .join('');

    if (errors.length) { throw new Error(errors); }

    return componentProps; }

  2. page-props-factory/component-props.tsプラグインファイルでは、exec()関数のインラインフェッチロジックをfetchComponentProps呼び出しに置き換えます。

    props.componentProps = await fetchComponentProps(props.layoutData, context);

  3. エラーページのコンポーネントでは:

    • インポートを追加してくださいComponentPropsContext:

      import { ComponentPropsContext } from '@sitecore-jss/sitecore-jss-nextjs';

    • コンポーネントをComponentPropsContextで巻き、示す通りcomponentPropsを渡します。

      import { ComponentPropsContext } from '@sitecore-jss/sitecore-jss-nextjs'; import { SitecorePageProps } from 'lib/page-props'; ... const Custom404 = (props: SitecorePageProps): JSX.Element => { return ( ... ); };

    • エラーページのgetStaticPropsまたはgetServerSideProps機能でコンポーネントプロップをフェッチします。

      const layoutData = resultErrorPages?.notFoundPage?.rendered || null;

      let componentProps = {};

      if (layoutData?.sitecore?.route) { componentProps = await fetchComponentProps(layoutData, context); }

    • return文を修正します:

      return { props: { headLinks: , layoutData, componentProps, }, };

今後のステップ

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

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