JSSがNext.js向けに提供したコンポーネント
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
JSS for Reactは、Sitecoreデータのレンダリング、コンテキストデータの提供、エラー処理、またはSitecoreエコシステムのさまざまな製品との統合を支援するヘルパーコンポーネントを提供します。
ComponentPropsContext
ComponentPropsContextコンポーネントは、valueプロパティで取得したデータを格納します。
アプリケーションテンプレートでは、このコンポーネントがSitecoreContextコンポーネントを含むページ全体をラップします。コンポーネントレベルのgetStaticPropsまたはgetServerSidePropsによって返されるコンポーネントプロパティは、ページプロパティの一部として提供されます。
const SitecorePage = ({ notFound, componentProps, layoutData }: SitecorePageProps): JSX.Element => {
// ... other code
return (
// ... layout components ); // ...
}
サイトコアコンテキスト
SitecoreContextコンポーネントは、コンポーネントファクトリーやレイアウトデータをコンポーネントツリーに渡す方法を、各レベルで手動で渡すことなく提供します。SitecoreContextコンポーネントは、アプリケーションのコーディング方法に応じてルートページのプレースホルダーやレイアウトコンポーネントをラップします。
例えば、SitecoreContextコンポーネントのcomponentFactoryプロパティを使うと、ページ編集中に異なるコンポーネントファクトリーを指定することができます。
import { componentFactory, editingComponentFactory } from 'temp/componentFactory'; // ... <SitecoreContext componentFactory={isEditing ? editingComponentFactory : componentFactory} layoutData={layoutData}
{isComponentRendering ? (
プレースホルダー
Placeholderコンポーネントは1つ以上のネストされたコンポーネントや入れ子されたプレースホルダーをグループ化します。プレースホルダーの内容は、コンテンツ作成者や編集者がページレイアウトをどのように構成したかによって決まります。アプリのルートコンポーネントや他のコンポーネントに追加すると、Placeholderコンポーネントは名前付きプレースホルダーキーを生成します。名前付きプレースホルダーキーを使って、JSSに登録された他のコンポーネントを対応するプレースホルダーに動的に配置できます。
Placeholderコンポーネントの詳細については、以下のドキュメントをご覧ください。
また、HiddenRendering、MissingComponent、カスタムエラーコンポーネントなどの特別なコンポーネントでプレースホルダーを強化することもできます。
訪問者識別
VisitorIdentificationコンポーネントはExperience Analytics Sitecore訪問者がロボットかどうかを判断するのに役立ちます。Sitecore XP(xConnect/xDBを含む)を使用している場合、このコンポーネントはJSSアプリから分析データを収集するために必要です。XM(CMS専用)アプリでは、このコンポーネントを外すことを推奨します。
訪問者識別ロジックは、特定の分析IDに対して一度だけ実行され、必要なクッキーが作成されます。
コンポーネントはnextjs-styleguide-trackingアドオンに含まれ、設定されています。
フィールドヘルパーコンポーネント
Next.js SDKはフィールド 値をレンダリングするのに役立つ複数のコンポーネントSitecore提供しています。一部のフィールドでは、JSS 20.1で導入されたNextImageコンポーネントのように、フレームワーク固有のコンポーネントをラップするコンポーネントを使うことも可能です。