ディスクベースの編集キャッシュ実装で使用されるデフォルトディレクトリを上書きします

import {
  EditingDataDiskCache,
  BasicEditingDataService,
  ServerlessEditingDataService
} from '@sitecore-jss/sitecore-jss-nextjs/editing';

// Override the default editingDataDiskCache with an accessible temp directory
export const myEditingDataDiskCache = new EditingDataDiskCache('C:\\temp');

// Override default editingDataService to use myEditingDataDiskCache for BasicEditingDataService
export const myEditingDataService = process.env.VERCEL
  ? new ServerlessEditingDataService()
  : new BasicEditingDataService({
      editingDataCache: myEditingDataDiskCache,
    });

import { EditingDataMiddleware } from '@sitecore-jss/sitecore-jss-nextjs/editing';
import { myEditingDataDiskCache } from 'lib/editing';

/**
 * This Next.js API route is used to handle Sitecore editor data storage and retrieval by key
 * on serverless deployment architectures (such as Vercel) via the `ServerlessEditingDataService`.
 * The `EditingDataMiddleware` expects this dynamic route name to be '[key]' by default but can
 * be configured to use something else with the `dynamicRouteKey` option. 
*/

// Bump body size limit (1mb by default) and disable response limit for Sitecore editor payloads
// See https://nextjs.org/docs/api-routes/request-helpers#custom-config
export const config = {
  api: {
    bodyParser: {
      sizeLimit: '2mb',
    },
    responseLimit: false,
  },
};

// Wire up the EditingDataMiddleware handler
const handler = new EditingDataMiddleware({
  editingDataCache: myEditingDataDiskCache,
}).getHandler();

export default handler;

import { EditingRenderMiddleware } from '@sitecore-jss/sitecore-jss-nextjs/editing';
import { myEditingDataService } from 'lib/editing';

/** * This Next.js API route handles POST requests from Sitecore editors.
 * This route should match the `serverSideRenderingEngineEndpointUrl` in your Sitecore configuration,
 * which is set to "http://localhost:3000/api/editing/render" by default (see \sitecore\config\nextjs-app.config).
 * * The `EditingRenderMiddleware` will *  1. Extract editing data from the Sitecore editor POST request
 *  2. Stash this data (for later use in the page render request) via an `EditingDataService`, which returns a key for retrieval
 *  3. Enable Next.js Preview Mode, passing our stashed editing data key as preview data
 *  4. Invoke the actual page render request, passing along the Preview Mode cookies.
 *     This allows retrieval of the editing data in preview context (via an `EditingDataService`) - see `SitecorePagePropsFactory`
 *  5. Return the rendered page HTML to the Sitecore editor
 */

// Bump body size limit (1mb by default) and disable response limit for Sitecore editor payloads
// See https://nextjs.org/docs/api-routes/request-helpers#custom-config
export const config = {
  api: {
    bodyParser: {
      sizeLimit: '2mb',
    },
    responseLimit: false,
  },
};

// Wire up the EditingRenderMiddleware handler
const handler = new EditingRenderMiddleware({
  editingDataService: myEditingDataService,
}).getHandler();

export default handler;

import { myEditingDataService } from 'lib/editing';
import { SitecorePageProps } from 'lib/page-props';
import { GetServerSidePropsContext, GetStaticPropsContext } from 'next';
import { Plugin } from '..';

class PreviewModePlugin implements Plugin {
  order = 0;
  
async exec(props: SitecorePageProps, context: GetServerSidePropsContext | GetStaticPropsContext) {
    if (!context.preview) return props;
    
    // If we're in preview (editing) mode, use data already sent along with the editing request
    const data = await myEditingDataService.getEditingData(context.previewData);
    
    if (!data) {
      throw new Error(
        `Unable to get editing data for preview ${JSON.stringify(context.previewData)}`
      );
    }
    props.locale = data.language;
    props.layoutData = data.layoutData;
    props.dictionary = data.dictionary;
    return props;
  }
}

export const previewModePlugin = new PreviewModePlugin();