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

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

JSS編集シークレットは、レンダリングAPIルートとデータAPIルートを通じてJSS Next.jsアプリによって公開されるSitecoreエディター エンドポイントを保護するために使用されるトークンです。

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

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

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

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プレビュー モードには 、プレビュー データのサイズ制限が2KBあり、Sitecore編集データはこの制限を超えています。データを編集するためのカスタムストレージソリューションは、この問題も解決します。

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

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

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