---
title: "JSS Next.jsアプリとSitecoreエディタを統合するためのアーキテクチャとAPI"
slug: "architecture-and-apis-for-integrating-jss-next-js-apps-with-sitecore-editors"
abstract: "JSS Next.jsをSitecore Experience EditorまたはHorizonと統合するためのアーキテクチャとAPIの概要"
---
# JSS Next.jsアプリとSitecoreエディタを統合するためのアーキテクチャとAPI

Next.jsアプリケーションは、[Sitecore Headless Services HTTPレンダリングエンジン](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/http-rendering-engine.html "HTTP rendering engine")、[Next.js APIルート](https://nextjs.org/docs/api-routes/introduction)、[Next.jsプレビューモード](https://nextjs.org/docs/advanced-features/preview-mode) を用いて、Experience EditorやHorizonなどの高度なSitecoreエディターと統合します。

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

![The architecture of integrating a Next.js JSS app with advanced Sitecore editors](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/hd/19/sitecore-headless-development/images/nextjs-ee-architecture.svg)

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

> !ヒントNext.js JSSアプリケーションのソースパスは、JSSプロジェクトの設定方法によって異なります。
> 
> 以下のパスはプロジェクトディレクトリに関連しています:
> 
> -   Sitecoreコンテナテンプレートを使ってプロジェクトを設定した場合、ソースディレクトリは <project-folder>/src/rendering/srcにあります。
>     
> -   JSS CLIを使ってJSS Next.jsアプリを作成した場合、ソースディレクトリは <app-name>/srcにあります。
>     
> 
> srcフォルダーへのパスを参照するには<src>を使用します。<src>を実際のパスに置き換えてください。

## APIルート

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

-   ファイル <src>/pages/api/editing/render.ts に定義されたRender API Routeは、Sitecoreエディタからの POST リクエストを処理し、JSS for Next.jsが提供するミドルウェア EditingRenderMiddleware にカプセル化された論理を用います。このルートをJSSアプリ設定オプションの値として serverSideRenderingEngineEndpointUrl。
-   <src>/pages/api/editing/data/key.tsで定義されたデータAPIルートは、JSS for Next.jsが提供するミドルウェアEditingDataMiddlewareを用いて、Sitecoreエディタから送信されるデータの保存と取得を担当する[動的なNext.js APIルート](https://nextjs.org/docs/api-routes/dynamic-api-routes)です。
-   ページルートは、<src>/pages/...path.tsxで定義された[メインNext.jsオプションのキャッチオールルート](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/routing-and-page-composition-in-jss-next-js-apps.html "Routing and page composition in JSS Next.js apps")で、すべての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に展開](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--deploying-jss-next-js-apps-to-vercel.html "Walkthrough: Deploying JSS Next.js apps to Vercel")すると、Render API Routeは自動的にPage Routeとは完全に分離された[サーバーレス関数](https://vercel.com/docs/serverless-functions/introduction)となり、サーバー上のNode.jsメモリキャッシュのような編集データの単純なストレージソリューションの選択肢がなくなります。

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

Next.jsはプレビューデータをクッキーに保存します。Next.jsプレビューモードには [プレビューデータのサイズ制限が2KB](https://nextjs.org/docs/advanced-features/preview-mode#previewdata-size-limits)で、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リクエストのプロトコルをオーバーライド](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/override-default-protocols-using-the-editingrendermiddleware-in-next-js-jss-apps.html "Override default protocols using the EditingRenderMiddleware in Next.js JSS apps")できます。

### 編集データサービス

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

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

### EditingDataMiddleware

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

EditingDataMiddleware:

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

### データキャッシュ編集

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

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

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