---
title: "JSSがNext.js向けに提供したコンポーネント"
slug: "components-provided-by-jss-for-next-js"
abstract: "JSSがNext.js向けに提供したコンポーネントについて説明し、Sitecoreデータのレンダリングを支援します。"
---
# JSSがNext.js向けに提供したコンポーネント
JSS for Reactは、Sitecoreデータのレンダリング、コンテキストデータの提供、エラー処理、またはSitecoreエコシステムのさまざまな製品との統合を支援するヘルパーコンポーネントを提供します。
## ComponentPropsContext
ComponentPropsContextコンポーネントは、valueプロパティで[取得したデータを](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/component-level-data-fetching-in-jss-next-js-apps.html "Component-level data fetching in JSS Next.js apps")格納します。
アプリケーションテンプレートでは、このコンポーネントが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';
// ...
{isComponentRendering ? (
) : (
)}
// ...
## プレースホルダー
Placeholderコンポーネントは1つ以上のネストされたコンポーネントや入れ子されたプレースホルダーをグループ化します。プレースホルダーの内容は、コンテンツ作成者や編集者がページレイアウトをどのように構成したかによって決まります。アプリのルートコンポーネントや他のコンポーネントに追加すると、Placeholderコンポーネントは名前付きプレースホルダーキーを生成します。名前付きプレースホルダーキーを使って、JSSに登録された他のコンポーネントを対応するプレースホルダーに動的に配置できます。
Placeholderコンポーネントの詳細については、以下のドキュメントをご覧ください。
- [JSSアプリにおけるプレースホルダーの導入](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/introducing-placeholders-in-jss-apps.html "Introducing placeholders in JSS apps")
- [Next.jsアプリでのプレースホルダーの扱いについて](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/working-with-placeholders-in-a-jss-next-js-app.html "Working with placeholders in a JSS Next.js app")
また、HiddenRendering、MissingComponent、カスタムエラーコンポーネントなどの[特別なコンポーネントでプレースホルダーを強化する](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/working-with-placeholders-in-a-jss-next-js-app.html#UUID-477fc2fc-0922-6b88-67c5-cdf2587838b2_section-idm4570943970512032630350849852 "Enhancing experience with placeholders")こともできます。
## 訪問者識別
VisitorIdentificationコンポーネントはExperience [Analytics Sitecore](https://doc.sitecore.com/xp/en/users/103/sitecore-experience-platform/experience-analytics.html)訪問者がロボットかどうかを判断するのに役立ちます。Sitecore XP(xConnect/xDBを含む)を使用している場合、このコンポーネントはJSSアプリから分析データを収集するために必要です。XM(CMS専用)アプリでは、このコンポーネントを外すことを推奨します。
訪問者識別ロジックは、特定の分析IDに対して一度だけ実行され、必要なクッキーが作成されます。
コンポーネントはnextjs-styleguide-trackingアドオンに含まれ、設定されています。
## フィールドヘルパーコンポーネント
Next.js SDKはフィールド [値をレンダリング](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/jss-components-for-rendering-sitecore-fields-in-next-js-applications.html "JSS components for rendering Sitecore fields in Next.js applications")するのに役立つ複数のコンポーネントSitecore提供しています。一部のフィールドでは、JSS 20.1で導入された[NextImageコンポーネント](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/the-jss-nextimage-component.html "The JSS NextImage component")のように、フレームワーク固有のコンポーネントをラップするコンポーネントを使うことも可能です。