JSS Next.jsアプリでSitecoreフォームを実装してください

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

JSSアプリでSitecoreフォームを使用するには、動作するセッションクッキーが必要です。この目的のために:

• 環境でSSLを有効にするか、Sitecoreインスタンスでセキュアクッキーを無効にしている必要があります。
• あなたのNext.js JSSアプリは RESTレイアウトサービスを使っています。
• あなたはサーバーサイドでルートをレンダリングし、関数GetServerSidePropsの実装を使ってフォームを表示します。

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

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) => (

   router.push(url)} /> );

   export default withRouter(JssNextForm);

   !注sitecoreApiHostを 空文字列に設定しなければなりません。例えば、sitecoreApiHost={''}はNext.jsサーバーにリクエストを送信します。そうでなければ、次のステップで設定した書き換えは期待通りに動作しません。

3. next.config.base.jsファイル内で、CORSや404エラーを防ぐために、接続モードの書き換えに以下の書き換え定義を追加してください。

   { source: '/api/jss/

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

4. JSSアプリを接続モードで起動してくださいjss start

   。