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

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

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

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

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

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

Sitecoreフォーム コンポーネントを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 { NextRouter, withRouter } from 'next/router';
import { sitecoreApiHost, sitecoreApiKey } from 'temp/config';

const JssNextForm = ({ fields, router }: { fields: any; router: NextRouter }) => {
  return (
    <Form
      language={router.locale}
      form={fields}
      sitecoreApiHost={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。

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