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

Sitecoreヘッドレス開発
Sitecore JavaScriptレンダリングSDK (JSS)
Sitecore JavaScript Next.jsのレンダリングSDK (JSS)
JSS for Next.jsが提供するコンポーネント
Next.js アプリケーションで Sitecore フィールドをレンダリングするための JSS コンポーネント

Next.jsアプリケーションでSitecoreフィールドをレンダリングするためのJSSコンポーネント

Version:

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

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

Next.jsのJSSは、Next.jsアプリケーションでSitecoreフィールドをレンダリングするのに役立つコンポーネントを提供します。

次の表は、SitecoreフィールドタイプとJSS Next.jsコンポーネント間の対応を示しています。

Sitecoreフィールドタイプ	JSS Next.jsコンポーネント
日付	Date
ファイル	File
画像	Image.バージョン20.1以降では、NextImageコンポーネントも使用できます。
一般リンク	Link
1行テキスト、複数行テキスト、または数値型	Text
リッチテキスト	RichText

以下は、サポートされているコンポーネントのリストとその使用例です。この例では、フィールドデータはPlaceholderコンポーネントによって提供されます。

日付

Dateコンポーネントは、JSSアプリケーションで日付と時刻のコンテンツフィールドをレンダリングするのに役立ちます。

Dateコンポーネントには、次のプロパティがあります。

名前	形容
field	必須。レンダリングするフィールド。Sitecoreの日付タイプである必要があります。フィールドデータには、次の2つのプロパティがあります。 valueプロパティ - Sitecoreアイテムの未加工のフィールド値を表します。 editableプロパティ - 編集が有効になっているときにレンダリングされる編集可能なマークアップが含まれています。
tag	日付値をラップするHTML要素の名前。デフォルト： span
editable	インライン編集を明示的に有効/無効にします。 trueとfield.editableに値がある場合、field.editableは処理され、コンポーネント出力としてレンダリングされます。 falseの場合、field.editable値は無視され、レンダリングされません。デフォルト： false
render	解析されたJavaScript Dateオブジェクトとしてフィールド値を受け取り、コンポーネントのラッピングtagにレンダリングする値を返す関数。これは、日付と日時のローカリゼーションの値を書式設定するために使用できます。

使い

日付フィールドをレンダリングするには、コンポーネントにインポートする必要があります。

import { DateField } from '@sitecore-jss/sitecore-jss-nextjs';

このコンポーネントは、次のように使用できます。

単純な日付フィールドをレンダリングするには:
<DateField field={props.fields.date} />
datetimeフィールドをレンダリングするには:
<DateField field={props.fields.dateTime} />

日付をUTC形式の文字列としてレンダリングするには:

<DateField field={props.fields.date} render={(date) => date.toUTCString()} />

メモ

renderプロパティは、編集モードでは無視されます。

このコンポーネントは、フォーマットのためにJS Dateオブジェクトへの直接アクセスを提供します。したがって、これを使用して、次のようにローカライズされた日付文字列と日時文字列をレンダリングできます。

<DateField field={props.fields.date} render={(date) => date.toLocaleDateString()} />
<DateField
  field={props.fields.dateTime}
  render={(date) => <em>{date.toLocaleString()}</em>}
/>

ファイル

Fileコンポーネントは、ファイルリンクをレンダリングします。

Fileコンポーネントには、次のプロパティがあります。

名前	形容
value	必須。レンダリングするルートフィールド。これは、プロパティがsrc、title、displayNameを持つSitecoreファイルタイプを表します。
children	レンダリングされた <a/> タグを設定するReactノード。デフォルト値はファイルです。

名前

形容

value

必須。

レンダリングするルートフィールド。これは、プロパティがsrc、title、displayNameを持つSitecoreファイルタイプを表します。

children

レンダリングされた <a/> タグを設定するReactノード。デフォルト値はファイルです。

大事な

Fileフィールドは、エクスペリエンスエディターでのインライン編集をサポートしていません。ただし、コンポーネントのデフォルトのフィールドエディタを使用して編集できます。

使い

ファイルフィールドをレンダリングするには、コンポーネントにインポートする必要があります。

import { File } from '@sitecore-jss/sitecore-jss-nextjs';

このコンポーネントは、次のように使用できます。

単純なファイルリンクをレンダリングするには:
<File field={props.fields.file} />
カスタムアンカーテキストを含む新しいタブで開くファイルリンクをレンダリングするには:
<File field={props.fields.file} target="_blank"> View file </File>

画像

Imageコンポーネントを使用すると、編集可能でレスポンシブな画像をレンダリングできます。

Imageコンポーネントには、次のプロパティがあります。

名前	形容
field	必須。フィールドデータには、次の2つのプロパティがあります。 valueプロパティ - Sitecoreアイテムの未加工のフィールド値を表します。 editableプロパティ - 編集が有効になっているときにレンダリングされる編集可能なマークアップが含まれています。
editable	画像のインライン編集を有効または無効にするために使用できるブール値。デフォルト: true。
imageParams	画像のURLに追加されるクエリ文字列パラメーターに変換するImageSizeParametersの配列。
srcSet	ネイティブのイメージsrcset属性の値として使用されるコンマ区切りの文字列を生成するためのImageSizeParameters定義の配列。
mediaUrlPrefix	/-/jssmediaまたは /~/jssmediaで置き換えられるメディアURLプレフィックスを検索するカスタム正規表現。

大事な

imageParamsまたはsrcSetプロパティを使用する場合は、セキュリティ上の理由から、画像パラメータをサーバー上でホワイトリストに登録する必要があります。

追加のプロパティをコンポーネントに渡すことができます。たとえば、ネイティブイメージのsizes属性の値を指定して、レスポンシブサーバサイドレンダリングイメージを有効にすることができます。

使い

Imageコンポーネントを使用するには、コンポーネントにインポートする必要があります。

import { Image } from '@sitecore-jss/sitecore-jss-nextjs';

Imageコンポーネントを使用して、次のものをレンダリングできます。

簡単なイメージ:
<Image media={props.fields.sample1} />

レスポンシブ画像:

<Image
  field={props.fields.sample2}
  srcSet={[{ mw: 300 }, { mw: 100 }]}
  sizes="(min-width: 960px) 300px, 100px"
  className="img-fluid"
/>

高度な構成のイメージ。たとえば、次のサンプルでは、エクスペリエンスエディターなどのSitecoreコンテンツおよびレイアウトエディターでは編集できない画像をレンダリングします。イメージは、imageParamsプロパティに基づいてサーバー側でサイズ変更されます。
<Image field={props.fields.sample2} editable={false} imageParams={{ mw: 100, mh: 50 }} height="50" width="94" data-sample="other-attributes-pass-through" />

リンク

Linkコンポーネントは、General Link Sitecoreフィールドのコンテンツをレンダリングするのに役立ちます。

コンポーネントは、Sitecoreフィールドのリンクが内部であるかどうかを確認し、内部である場合は、Next.js Linkコンポーネント (next/link) を使用してリンクをレンダリングします。それ以外の場合は、リンクコンポーネントをレンダリングします。

Linkコンポーネントには、次のプロパティがあります。

名前	形容
field	必須。レンダリングするルートフィールド。Sitecore General Linkフィールドタイプである必要があります。フィールドデータには、次のプロパティがあります。 valueプロパティ - Sitecoreアイテムの未加工のフィールド値を表します。 editableFirstPartプロパティ - 編集が有効になっているときにレンダリングされる編集可能なマークアップの最初の部分が含まれています。 editableLastPartプロパティには、編集が有効になったときにレンダリングされる編集可能なマークアップの最後の部分が含まれます。
editable	エディターを使用するか、Sitecore形式のHTML出力を使用するかを示します。デフォルト： true 手記 Sitecoreからの編集可能な出力を使用する場合、LinkはSitecoreが提供するマークアップの周囲にラッパースパンを作成し、このスパンにホスト要素属性を適用します。
internalLinkMatcher	内部リンクを識別するための正規表現パターン。デフォルト： /^\//g
showLinkTextWithChildrenPresent	子が存在する場合でもリンクの説明の表示を有効または無効にするブール式。手記 Sitecoreエクスペリエンスエディターでは、技術的な制限によりこの設定は無視され、説明は常にレンダリングされます。
prefetch	リンクに対してNext jsのプリフェッチが有効になっているかどうか。JSSバージョン22.5.1以降が必要です (以前のバージョンでは、プリフェッチは常に有効でした)。デフォルト： true

使い

Linkフィールドヘルパーコンポーネントを使用するには、コンポーネントにインポートする必要があります。

import { Link } from '@sitecore-jss/sitecore-jss-nextjs';

Linkコンポーネントを使用して、次のものをレンダリングできます。

外部リンク:
<Link field={props.fields.externalLink} />

HTMLまたはその他のコンポーネントとの内部リンク:

<Link field={props.fields.internalLink}>
  <em>HTML</em> or other components can be used within link renderers, for example, links to images.
</Link>

メールリンク:
<Link field={props.fields.emailLink} />
コンテンツパラメータリンク:
<Link field={props.fields.paramsLink} />

リンクコンポーネントは、追加のプロパティまたは属性を受け入れます。例えば：

<Link
  field={props.fields.externalLink}
  showLinkTextWithChildrenPresent={true}
  className="font-weight-bold"
  data-otherattributes="pass-through-to-anchor-tag"
/>

手記

エクスペリエンスエディターでは、リンクの説明は常に編集モードでレンダリングされます。リンクに子がある場合、それらはリンクの説明の兄弟としてレンダリングされます。

テキスト

Textコンポーネントは、Single-Line Text、Multi-Line Text、または数値フィールドタイプのSitecoreフィールドを表示するのに役立ちます。

Textコンポーネントには、次のプロパティがあります。

名前	形容
field	必須。レンダリングするフィールド。フィールドデータには、次の2つのプロパティがあります。 valueプロパティ - Sitecoreアイテムの未加工のフィールド値を表します。 editableプロパティ - 編集が有効になっているときにレンダリングされる編集可能なマークアップが含まれています。
tag	テキスト値を折り返すHTML要素の名前。デフォルト： span
editable	エディターを使用するか、Sitecore形式のHTML出力を使用するかを示します。デフォルト： true
encode	出力値のHTMLエンコードを有効または無効にします。falseの値は、editable: falseも意味します。デフォルト： true

Multi-line Textフィールドタイプの場合、指定された編集可能な値では、改行はすべて<br />に置き換えられます。編集不可の値を使用する場合は、field.valueを処理して改行JSON目的のマークアップに置き換えるか、pre-wrapなどのCSS空白値を使用できます。

使い

Textコンポーネントを使用するには、コンポーネントにインポートする必要があります。

import { Text } from '@sitecore-jss/sitecore-jss-nextjs';

レンダリングできるもの:

デフォルトのオプションを持つテキストフィールド:
<Text field={props.fields.sample} />

カスタムタグ、CSSクラス、カスタム属性を含む編集不可能なテキストフィールド:

<Text
  field={props.fields.sample2}
  tag="section"
  editable={false}
  encode={false}
  className="font-weight-bold"
  data-sample="other-attributes-pass-through"
/>

Sitecoreテキストフィールドの未加工の値をレンダリングする場合は、インポートステートメントにgetFieldValue関数を追加します。その後、アプリケーションで生の値を検査できます。例えば：

<div>Raw value (not editable): {getFieldValue(props.fields, 'sample')}</div>

リッチテキスト

RichTextコンポーネントは、Sitecore Rich Textフィールドのレンダリングに役立ちます。

RichTextコンポーネントには、次のプロパティがあります。

名前	形容
field	必須。レンダリングするフィールド。フィールドデータには、次の2つのプロパティがあります。 valueプロパティ - Sitecoreアイテムの未加工のフィールド値を表します。 editableプロパティ - 編集が有効になっているときにレンダリングされる編集可能なマークアップが含まれています。
tag	テキスト値を折り返すHTML要素の名前。デフォルト： div
editable	エディターを使用するか、Sitecore形式のHTML出力を使用するかを示します。デフォルト： true
prefetchLinks	リッチテキストコンポーネント内のリンクのプリフェッチメソッド。次のいずれかになります。 true - すべてのリンクはページの読み込み時に先読みされます。これにより、全体的なパフォーマンスが最高になりますが、リソースコストが高くなる可能性があります。 hover - リンクは、ユーザーがマウスをリンクの上に置いたときに個別にプリフェッチされます。これにより、大幅なリソースコストをかけずに、パフォーマンス上の利点が得られます。JSSバージョン22.5.1以降が必要です false - リンクはプリフェッチされません。これは、パフォーマンスが遅くなることを意味しますが、リンクがクリックされたときにのみデータが取得されます。デフォルト： true

使い

RichTextコンポーネントを使用するには、コンポーネントにインポートする必要があります。

import { RichText } from '@sitecore-jss/sitecore-jss-nextjs';

レンダリングできるもの:

デフォルトのオプションを持つフィールド:
<RichText field={props.fields.sample} />

カスタムタグ、CSSクラス、カスタム属性を持つ編集不可能なリッチテキストフィールド:

<RichText
  field={props.fields.sample2}
  tag="section"
  editable={false}
  className="font-weight-bold"
  data-sample="other-attributes-pass-through"
/>

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