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

Sitecoreエディターと統合するために、Next.js JSSサンプル アプリケーションには、次の3つのNext.js APIルートが含まれています。

JSS Editing Secretは、Render API RouteとData API Routeを介してJSS Next.jsアプリによって公開されるSitecoreエディター エンドポイントを保護するために使用されるトークンです。

JSS Editing Secretは、クライアント側とサーバー側で設定する必要があります。

ミドルウェアEditingRenderMiddlewareとEditingDataMiddlewareは、トークンを自動的に検証します。検証に失敗した場合は、HTTPステータスコード401のレスポンスを返します。

プレビュー モードはNext.jsの組み込み機能で、ドラフト コンテンツ (Sitecoreエクスペリエンス エディターなど) を作成し、静的生成をバイパスしてリクエスト時にこのコンテンツを含むページをレンダリングするCMSのユースケースを対象としています。

Next.js JSSアプリとSitecoreエディターの統合は、この機能に依存します。

EditingRenderMiddlewareミドルウェアは、Next.jsプレビュー モードを有効にします。プレビュー モードではNext.js Render API Routeレスポンスに特定のCookieが作成され、後続のPage Routeリクエストに渡されます。

Page Props Factoryは、ページのレンダリングに必要なすべてのデータを準備する役割を担い、現在のルートがプレビューモードになっているかどうかを確認します。ページがプレビューモードであると判断された場合、Page Routeリクエストは編集リクエストであり、プレビュー/編集データを使用できます。

SitecoreエディターがRender API Routeに対して行うPOSTリクエストには、特定のページ ルートをレンダリングするために必要なすべてのものが含まれています。このリクエストには、レイアウト、辞書、言語のデータに加えて、エディターのレンダリングに必要な追加のメタデータと未保存のレイアウト情報が含まれます。このデータは、データの編集と呼ばれます。

Page Props Factoryは、編集データを使用してページpropsを取り込みます。編集モードではないときに個別に取得するのではなく、ページ に入力します。

Vercelにデプロイすると、Render API Routeは自動的にPage Routeから完全に分離されたサーバーレス関数になり、サーバー上のNode.jsメモリキャッシュなど、編集データ用の単純なストレージソリューションの選択肢がなくなります。

Sitecore Next.js SDKには、Vercel Serverless Functionsとの互換性の問題を解決するキャッシュ実装が含まれています。

Next.jsはプレビュー データをCookieに保存します。Next.jsプレビュー モードには 、プレビュー データのサイズ制限が2 KBあり 、Sitecore編集データはこの制限を超えています。データを編集するためのカスタムストレージソリューションは、この問題も解決します。

Sitecoreエディター統合に関連するAPIは、EditingDataServiceを除き、middlewareサブモジュールの @sitecore-jss/sitecore-jss-nextjs NPMパッケージにあります。

これらを使用するには、コード ファイルにインポートします。例えば：

import { EditingRenderMiddleware } from '@sitecore-jss/sitecore-jss-nextjs/middleware';
import { editingDataService } from '@sitecore-jss/sitecore-jss-nextjs';