1. JSS Next.jsアプリをSitecoreエディターと統合するためのアーキテクチャとAPI

チュートリアル: Next.js JSSアプリをSitecoreエディターに接続する

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

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

Sitecoreコンテナー テンプレートを使用してNext.js JSSアプリケーションを作成すると、Next.jsアプリはSitecoreエディターとの統合用に事前に設定されています。ただし、JSSアプリ初期化子を使用してアプリを作成した場合は、Sitecoreエディターとの統合を手動で設定する必要があります。

Next.js JSSアプリをSitecoreエディターに接続する前に、次のことを行う必要があります。

JSSアプリケーションを接続したら、Next.js JSSアプリケーションをSitecore Experience EditorやHorizonなどのSitecoreエディターと統合できます。

このチュートリアルでは、次の方法について説明します。

  • JSSアプリのSitecore設定パッチを更新します。

  • Sitecoreエディター エンドポイントを保護します。

  • Next.jsアプリケーションを構成します。

メモ

Next.js用のSitecoreコンテナ テンプレートは、エクスペリエンス エディターとの事前設定された統合を提供します。

JSSアプリのSitecore設定パッチを更新する

コードファーストNext.jsアプリケーションの高度なSitecoreエディターとの統合を有効にするには、まずSitecore設定パッチを使用してJSSアプリケーションを設定する必要があります。

Sitecoreエディター統合に必要な設定を作成するには、次の手順に従います。

  1. Next.js JSSアプリケーション・ディレクトリのルートで、ファイル /sitecore/configを開きます。

  2. パスconfiguration/sitecore/javaScriptServices/appsで、Next.jsアプリケーションのappノードで、次の属性を設定します。

    • serverSideRenderingEnginehttpに。これは、Next.jsアプリケーションがSitecoreエディターとの統合にHTTPレンダリング エンジンを使用するためです。

    • serverSideRenderingEngineApplicationUrl選択したホスト名とポートに貼り付けます。デフォルト値はhttp://localhost:3000です。

    • serverSideRenderingEngineEndpointUrlをSitecoreエディターからのPOSTリクエストを処理するためのNext.jsアプリのAPIルートの絶対URLに設定します。デフォルト値は、Render API Route http://localhost:3000/api/editing/renderのルートです。

    デフォルト値のデフォルト設定は次のとおりです。

    <configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    ...
    <javaScriptServices>
      <apps>
        <app name="exampleApp"
            ...
            serverSideRenderingEngine="http"
            serverSideRenderingEngineEndpointUrl="http://localhost:3000/api/editing/render"
            serverSideRenderingEngineApplicationUrl="http://localhost:3000"
            ...
        />
      </apps>
    </javaScriptServices>
    ...  
  </sitecore>
</configuration>

  3. ターミナルで、次のコマンドを実行して、新しい設定をSitecoreインスタンスにデプロイします。

    jss deploy config

Sitecoreエディター エンドポイントの保護

Next.jsアプリケーションを使用して編集モードでSitecoreページをレンダリングする場合は、Next.jsアプリのエディター統合APIルートを通じてSitecoreエディター エンドポイントを公開します。

Sitecoreエディター エンドポイントを保護するには、最初にシークレット トークンを生成する必要があります。Sitecoreでは、英数字の値 ( at least 16 characters) を推奨しています。

このシークレットは、サーバー側とクライアント側の両方で設定する必要があり、値は一致する必要があります。

JSS Editing Secretをサーバー側で設定するには、2つのオプションがあります。SITECORE_JSS_EDITING_SECRET環境変数を設定するか、Sitecore設定パッチを使用してSitecoreエディター エンドポイントを保護できます。

Sitecore設定パッチを使用してSitecoreエディター エンドポイントを保護するには:

  1. Next.js JSSアプリケーションディレクトリのルート、/sitecore/configファイル、ノードconfiguration/sitecore/javaScriptServices/settingsで、以下を追加またはコメント解除してJavaScriptServices.ViewEngine.Http.JssEditingSecretを設定します。

    <setting name="JavaScriptServices.ViewEngine.Http.JssEditingSecret" value="<YOUR_SECRET_TOKEN>" />

  2. ターミナルで、次のコマンドを実行して、新しい設定をSitecoreインスタンスにデプロイします。

    jss deploy config

Next.jsアプリケーションを構成する

Sitecoreエディター統合用にNext.jsアプリケーションを設定するには:

  1. プロジェクトのルートディレクトリにある .envファイルで、環境変数JSS_EDITING_SECRETをサーバー側で構成したSITECORE_JSS_EDITING_SECRETの値に設定します。

  2. Sitecoreエディターで編集可能な任意のページで、useEffect Reactフック内で、ユーティリティ関数handleEditorFastRefreshを呼び出します (まだ存在しない場合は)。

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

const MyPage = ({ notFound, layoutData, componentProps }: SitecorePageProps): JSX.Element => {
  useEffect(() => {
    // Refresh Experience Editor / Horizon markup and JS after Next.js Fast Refresh
    handleEditorFastRefresh();
  }, []);
  ...
};

export default MyPage;
    手記

    Next.jsサンプル アプリケーションには、このコードが既定のキャッチオール ルートに既に含まれています。

    Next.js Fast Refresh機能は、Sitecoreエクスペリエンス エディター内で使用する場合、いわゆるエディター クロム (レンダリングごとにSitecoreエディターによって挿入される追加のマークアップとJavaScript) を保持するために特別な処理が必要です。

    デフォルトでは、エディターのクロムのみが更新されます。一部のシナリオでは、forceReloadパラメーターを使用して、代わりにページ全体を強制的に再読み込みしたい場合があります。

    handleEditorFastRefresh(true)

統合を確認する

Next.jsアプリケーションが正しく実行されていることを確認するには、次のようにします。

  • アプリケーションのURLを開きます (デフォルトではブラウザー http://localhost:3000 )。

トラブルシューティング

Next.jsを開発モードで実行している場合、動的コンパイルにより、最初のページ編集時にタイムアウトが発生する場合があります。ただし、これは後続の要求で自動的に解決されることが期待できます。

その他の問題が発生した場合は、次の点を確認してください。

  • JSS Editing Secretがサーバー側とクライアント側の両方で一致することを確認します。

  • Next.jsログにエラーがないか確認します。

  • Sitecoreログにエラーがないか確認します。

先端

JSSデバッグ ロガーを使用して、Next.jsアプリでのSitecoreエディター統合をデバッグします。

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