Sitecore JavaScriptレンダリングSDK(JSS)Next.js

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

Version:

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

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

Next.jsアプリケーションは、Sitecore Headless Services HTTPレンダリングエンジン、Next.js APIルート、Next.jsプレビューモードを用いて、Experience EditorやHorizonなどの高度なSitecoreエディターと統合します。

以下の図は、Next.js JSSアプリと高度なSitecoreエディタを統合するアーキテクチャを示しています。図はSitecoreエクスペリエンスエディターを例に挙げていますが、Horizon統合のアーキテクチャは似ています。

!注図では、Next.jsのJSSに含まれるAPIがティールで強調されています。他の色の要素はNext.js JSSサンプルアプリケーションの一部です。

!ヒントNext.js JSSアプリケーションのソースパスは、JSSプロジェクトの設定方法によって異なります。

以下のパスはプロジェクトディレクトリに関連しています:

Sitecoreコンテナテンプレートを使ってプロジェクトを設定した場合、ソースディレクトリは /src/rendering/srcにあります。

JSS CLIを使ってJSS Next.jsアプリを作成した場合、ソースディレクトリは /srcにあります。

srcフォルダーへのパスを参照するにはを使用します。を実際のパスに置き換えてください。

APIルート

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

ファイル /pages/api/editing/render.ts に定義されたRender API Routeは、Sitecoreエディタからの POST リクエストを処理し、JSS for Next.jsが提供するミドルウェア EditingRenderMiddleware にカプセル化された論理を用います。このルートをJSSアプリ設定オプションの値として serverSideRenderingEngineEndpointUrl。
/pages/api/editing/data/key.tsで定義されたデータAPIルートは、JSS for Next.jsが提供するミドルウェアEditingDataMiddlewareを用いて、Sitecoreエディタから送信されるデータの保存と取得を担当する動的なNext.js APIルートです。
ページルートは、/pages/...path.tsxで定義されたメインNext.jsオプションのキャッチオールルートで、すべてのSitecoreページルートをレンダリングします。

JSS編集の秘密

JSS編集シークレットは、JSS Next.jsアプリがRender API RouteおよびData API Routeを通じて公開するSitecoreエディタエンドポイントを保護するためのトークンです。

JSS編集シークレットはクライアント側とサーバー側の両方で設定する必要があります。

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

Next.jsプレビューモード

プレビューモードは、Next.jsの組み込み機能で、Sitecoreエクスペリエンスエディターのようなドラフトコンテンツを書く際に、リクエスト時にこのコンテンツでページをレンダリングし、静的な生成を回避したい場合に向けられています。

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

EditingRenderMiddlewareミドルウェアはプレビューモードNext.js有効化します。プレビューモードNext.js Render API Route応答に特定のクッキーを作成し、それを次のページルートリクエストに渡します。

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

JSS Next.jsにおけるデータ編集の理解

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

ページ小道具ファクトリーは、編集モードでない時に個別に取得するのではなく、編集データを使ってページpropsを埋め込みます。

リクエスト間の編集データの維持

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

Sitecore Next.js SDKには、Vercelサーバーレス関数との互換性問題を解決するキャッシュ実装が含まれています。

Next.jsはプレビューデータをクッキーに保存します。Next.jsプレビューモードにはプレビューデータのサイズ制限が2KBで、Sitecore編集データはこの制限を超えます。カスタムストレージソリューションでデータ編集も解決されます。

API

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';

EditingRenderMiddleware

EditingRenderMiddlewareは編集用のレンダー APIルートのミドルウェア/ハンドラです。ミドルウェア:

JSS編集秘密を検証します。
POSTリクエストペイロードから編集データを抽出し、キーを返すEditingDataServiceの助けを借りて保存します。
Next.jsプレビューモードを有効にし、隠し持った編集データキーをプレビューデータとして渡します。
ページルートリクエストを呼び出し、プレビューモードのクッキーを渡します。
レンダリングされたページのHTMLをSitecoreエディターに、期待されるJSON形式で返します。
Vercel上でJSS Next.jsアプリケーションをホストしていないときにHTTPリクエストのプロトコルをオーバーライドできます。

編集データサービス

EditingDataServiceはリクエスト間で編集データ(編集データ)を管理Sitecore担当するサービスです。

通常はデフォルト値を持ったEditingDataServiceシングルトンのeditingDataServiceサービスを使用します。

EditingDataMiddleware

EditingDataMiddlewareはデータAPIルート編集のミドルウェア/ハンドラーです。

EditingDataMiddleware:

JSS編集秘密を検証します。
EditingDataCacheを通じて(HTTP PUTリクエスト)または(HTTP GETリクエスト)を編集します。

データキャッシュ編集

EditingDataCacheは編集データキャッシュの実装を定義するインターフェースです。

データディスクキャッシュ編集

EditingDataDiskCacheはディスクベースのEditingDataCache実装(デフォルト)です。サーバーレス関数を用いて、Vercel上でホスティングするために必要なものです。

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