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

SitecoreフォームをJSS Next.jsアプリに実装する

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

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

Sitecoreフォームを作成し、そのフォームをSitecoreのJSSアプリ ルートに追加したら、SitecoreフォームをレンダリングするJSSフォーム コンポーネントをJSSアプリケーションに実装できます。

JSSアプリでSitecore Formsを使用するには、セッションCookieが機能している必要があります。この目的のために、次のことを行います。

Sitecore FormコンポーネントをJSS Next.jsアプリケーションでレンダリングするには:

  1. JSSアプリケーションのルート・ディレクトリーで、次のコマンドを実行して必要なパッケージをインストールします。

    npm install @sitecore-jss/sitecore-jss-forms @sitecore-jss/sitecore-jss-react-forms

  2. レンダリングアプリのsrcディレクトリにあるコンポーネントファイル( src/components/JssNextForm.tsxなど)に、フォームコンポーネントを実装します。

    import { Form } from '@sitecore-jss/sitecore-jss-react-forms';
import React from 'react';
import { withRouter } from 'next/router';
import { sitecoreApiHost, sitecoreApiKey } from '../temp/config';

const JssNextForm = ({ fields, router }: any) => (
    <Form
      form={fields}
      sitecoreApiHost={''}
      sitecoreApiKey={sitecoreApiKey}
      onRedirect={(url) => router.push(url)}
    />
  );

export default withRouter(JssNextForm);
    メモ

    Next.jsサーバーに要求を送信するには、sitecoreApiHostをempty string( sitecoreApiHost={''}など) に設定する必要があります。そうしないと、次の手順で設定した書き換えが期待どおりに機能しません。

  3. next.config.base.jsファイルで、次の書き換え定義を接続モードの書き換えに追加して、CORSと404エラーを防ぎます。

        {
        source: '/api/jss/:path*',
        destination: `${jssConfig.sitecoreApiHost}/api/jss/:path*`
    },

  4. JSSアプリをjss start:connectedを使用して接続モードで起動します。

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