JSS for Next.jsが提供するコンポーネント

Version:

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

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

React用JSSは、Sitecoreデータのレンダリング、コンテキストデータの提供、エラーの処理、Sitecoreエコシステムのさまざまな製品との統合に役立つヘルパーコンポーネントを提供します。

コンポーネントプロパティコンテキスト

ComponentPropsContextコンポーネントは、コンポーネントレベルでフェッチされたデータを valueプロパティに格納します。

アプリケーションテンプレートでは、このコンポーネントはSitecoreContextコンポーネントを含むページ全体をラップします。コンポーネント・レベルのgetStaticPropsまたはgetServerSidePropsによって返されるコンポーネント・プロパティは、ページ・プロパティの一部として提供されます。

const SitecorePage = ({ notFound, componentProps, layoutData }: SitecorePageProps): JSX.Element => {

  // ... other code
   return (
      <ComponentPropsContext value={componentProps}>
        <SitecoreContext
          componentFactory={isEditing ? editingComponentFactory : componentFactory}
          layoutData={layoutData}
        >
         // ... layout components
        </SitecoreContext>
      </ComponentPropsContext>
    );
  // ...
 
}

サイトコアコンテキスト

SitecoreContextコンポーネントは、コンポーネントファクトリとレイアウトデータをコンポーネントツリーに渡す方法を提供します。これは、すべてのレベルで手動でプロパティを渡す必要はありません。SitecoreContextコンポーネントは、アプリケーションのコーディング方法に応じて、ルートページプレースホルダまたはレイアウトコンポーネントをラップします。

たとえば、SitecoreContextコンポーネントのcomponentFactoryプロパティを使用する場合、ページの編集中に別のコンポーネントファクトリを指定できます。

import { componentFactory, editingComponentFactory } from 'temp/componentFactory';    
// ... 
<SitecoreContext
  componentFactory={isEditing ? editingComponentFactory : componentFactory}
  layoutData={layoutData}
  >
    {isComponentRendering ? (
      <EditingComponentPlaceholder rendering={layoutData.sitecore.route} />
     ) : (
       <Layout layoutData={layoutData} />
     )}
</SitecoreContext>
// ...

プレースホルダ

Placeholderコンポーネントは、1つ以上のネストされたコンポーネントまたはネストされたプレースホルダーをグループ化します。プレースホルダーの内容は、コンテンツ作成者と編集者がページレイアウトをどのように構成したかによって決まります。アプリのルートコンポーネントまたは別のコンポーネントに追加すると、Placeholderコンポーネントは名前付きプレースホルダーキーを作成します。名前付きプレースホルダ・キーを使用して、JSSに登録されている他のコンポーネントを対応するプレースホルダに動的に配置できます。

Placeholderコンポーネントの詳細については、次のドキュメントを参照してください。

プレースホルダーは、HiddenRendering、MissingComponent、カスタムエラーコンポーネントなどの特別なコンポーネントで拡張することもできます。

訪問者の識別

VisitorIdentificationコンポーネントは、エクスペリエンス分析Sitecore訪問者がロボットであるかどうかを判断するのに役立ちます。Sitecore XP (xConnect/xDBを使用) を使用している場合、JSSアプリから分析データを収集するには、このコンポーネントが必要です。XM (CMSのみ) アプリの場合は、このコンポーネントを削除することをお勧めします。

訪問者識別ロジックは、特定の分析IDに対して1回だけ実行され、必要なCookieが作成されます。

コンポーネントは、nextjs-styleguide-trackingアドオンに含まれ、設定されます。

フィールドヘルパーコンポーネント

このNext.js SDKには、Sitecoreフィールド値のレンダリングに役立ついくつかのコンポーネントが用意されています。一部のフィールドでは、JSS 20.1で導入されたNextImageコンポーネントなど、フレームワーク固有のコンポーネントをラップするコンポーネントの使用を選択できます。