---
title: "Next.jsアプリケーションにおけるSitecoreフィールドのレンダリングのためのJSSコンポーネント"
slug: "jss-components-for-rendering-sitecore-fields-in-next-js-applications"
abstract: "Sitecoreフィールドのレンダリングに役立つNext.jsのJSSコンポーネントを説明しています。"
---
# Next.jsアプリケーションにおけるSitecoreフィールドのレンダリングのためのJSSコンポーネント

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

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

Sitecoreフィールドタイプ

JSS Next.js コンポーネント

日付

Date

ファイル

File

画像

Image.バージョン20.1以降は [、NextImageコンポーネント](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/the-jss-nextimage-component.html)も使えるようになりました。

一般リンク

Link

単行テキスト、多行テキスト、または数値タイプ

Text

リッチテキスト

RichText

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

## 日付

Dateコンポーネントは、JSSアプリケーション内の日付と時間のコンテンツフィールドのレンダリングを支援します。

Date成分は以下の性質を持ちます:

名称

概要

field

必須。  
  
レンダリングしたいフィールド。それはSitecoreのDate型でなければなりません。フィールドデータには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ノードです。デフォルト値はファイルです。

> !重要ファイルフィールドはエクスペリエンスエディターでのインライン編集をサポートしていません。しかし、コンポーネントのデフォルトフィールドエディターを使って編集することは可能です。

### 使用例

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

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に追加された[クエリ文字列パラメータ](https://community.sitecore.net/technical_blogs/b/sitecorejohn_blog/posts/media-options-and-query-string-parameters-in-the-sitecore-asp-net-cms)に変換するImageSizeParametersの配列です。

srcSet

ネイティブ画像のsrcset属性の値として使われる、カンマ区切り文字列を生成するためのImageSizeParameters定義の配列です。

mediaUrlPrefix

メディアURLのプレフィックスを /-/jssmedia または /~/jssmediaに置き換えるカスタム正規表現です。

> !重要imageParamsやsrcSetプロパティを使用する際は、セキュリティ上の理由から画像パラメータを [サーバー上でホワイトリスト化](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/media-handler.html "Media Handler") しなければなりません。
> 
> コンポーネントに追加のプロパティを渡すことができます。例えば、ネイティブ画像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"
    />
    
-   高度な設定が可能な画像。例えば、以下のサンプルは、Experience Editorのような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リンクコンポーネント(next/link)を使ってリンクをレンダリングします。そうでなければ、[リンクコンポーネント](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/jss-components-for-rendering-sitecore-fields-in-next-js-applications.html#UUID-9c0c9daa-3d9e-d3ee-93da-abc62d9c9e52_section-idm4537100629222432630757789717 "Link")をレンダリングします。

Link成分は以下の性質を持ちます:

名称

概要

field

必須。  
  
レンダリングしたいルートフィールド。それはSitecore *General Link* フィールドタイプでなければなりません。フィールドデータは以下のプロパティを持っています:  
  

-   valueプロパティ - Sitecoreアイテムの生フィールド値を表します。
-   editableFirstPartプロパティは、編集が有効になったときにレンダリングされる編集可能なマークアップの最初の部分を含みます。
-   editableLastPartプロパティ- は、編集が有効になったときにレンダリングされる編集可能なマークアップの最後の部分を含みます。

editable

エディターを使うかSitecore形式のHTML出力を使うかを示します。  
  
デフォルト: true  
  
\> \[!注\]  
\> Sitecoreからの編集可能な出力を使用する場合、LinkはSitecore提供されたマークアップの周りにラッパースパンを作成し、そのスパンにホスト要素の属性を適用します。

internalLinkMatcher

内部リンクを特定するための正則表現パターン。  
  
デフォルト: /^\\//g

showLinkTextWithChildrenPresent

子が存在してもリンク記述の表示を有効または無効にするブール式です。  
  
\> \[!注\]  
\> この設定は技術的な制約により、Sitecoreエクスペリエンスエディターでは無視され、説明は常にレンダリングされます。

### 使用例

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コンポーネントは、*単行テキスト*、*多行テキスト*、または数値フィールドのタイプのSitecoreフィールドのレンダリングを助けます。

Text成分は以下の性質を持ちます:

名称

概要

field

必須。  
  
レンダリングしたいフィールド。フィールドデータには2つのプロパティがあります:  
  

-   valueプロパティ - Sitecoreアイテムの生フィールド値を表します。
-   editableプロパティ - 編集が有効になったときにレンダリングされる編集可能なマークアップが含まれています。

tag

テキスト値をラップしたいHTML要素の名前です。  
  
デフォルト: span

editable

エディターを使うかSitecore形式のHTML出力を使うかを示します。  
  
デフォルト: true

encode

出力値のエンコードHTML有効または無効化します。これを false 値に設定すると、 editable: falseもなります。  
  
デフォルト: true

*複数行テキスト*フィールドタイプの場合、編集可能な値の中で、行切れは <br />に置き換えられます。編集不可の値を使えば、field.valueをJSONの改行を望むマークアップに置き換えるか、プリラップのような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

### 使用例

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"
    />