1. Next.js

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

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

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

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

アップグレード時には、Next.jsアプリケーションを作成する際に使用したJSSテンプレートやアドオンを検討してください。それらはpackage.jsonファイル内で見つけることができます。例えば、JSS 22.7アプリケーションでは以下のテンプレートやアドオンが使われる場合があります。

  • Nextjs
  • nextjs-styleguide OR nextjs-sxa
  • Nextjs-multisite

!注始める前に

  • まだなら、アプリをJSS 22.7にアップグレードしてください。

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

このトピックでは、以下の方法を説明します:

  1. 既存のアプリでアプリケーション依存関係を更新する
  2. 既存のアプリ内のNext.jsテンプレートファイルを更新してください:::

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

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

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

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

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

    npm install

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

これは、既存のアプリケーション内のファイルを新しいJSS 22.8アプリの対応ファイルと同期する方法を説明しています。これらの手順は、nextjs-sxaアドオンを使用している場合にのみ適用すれば十分です。

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

  • src/Layout.tsxを修正する:
    • 定数宣言の後に次のコードブロックを貼り付けます。

      const renderContent = () => ( <>

      {route && }
      );
    • 次の一行を見つけてください:

    • divの既存の内容を次の行に置き換えます:

      renderContent()

今後のステップ

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

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