---
title: "JSS NextImageコンポーネントの設定"
slug: "configuring-the-jss-nextimage-component"
abstract: "JSS NextImageコンポーネントの参考ドキュメント"
---
# JSS NextImageコンポーネントの設定
JSS NextImageコンポーネントは、Sitecoreフィールドで[Next.js画像コンポーネント](https://nextjs.org/docs/basic-features/image-optimization)で設定された画像を表示するためのフィールドレンダリングヘルパーコンポーネントです。
JSS NextImageコンポーネントはVercelが提供する組み込みの画像最適化を使用していますが、必要に応じてloaderプロパティを活用して独自の[ローダー](https://nextjs.org/docs/basic-features/image-optimization#loaders)を用意することも可能です。21.6.1以前のJSSバージョンでは、NextImageコンポーネントはカスタムローダーを使用しています。
このコンポーネントは[JSS Media API](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/jss-media-api.html "JSS Media API")と[Headless Servicesメディアハンドラ](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/media-handler.html "Media Handler") を使って画像のサイズを調整します。
> !注NextImageコンポーネントを使用するには、@sitecore-jss/sitecore-jss-nextjsバージョン20.1.0以降にアップデートする必要があります。
以下の表は、NextImageコンポーネントの設定に使用できるプロパティを示しています:
名称
種類
概要
field
ImageField | ImageFieldValue
必須。
画像フィールドデータ。データは Placeholder コンポーネントによって提供されます。
editable
boolean
Sitecore形式の出力を使用する必要があるかどうかを示します。
デフォルト: true。
mediaUrlPrefix
RegExp
メディアURLの接頭辞を /-/jssmedia または /~/jssmediaに置き換える正規表現です。
imageParams
ImageSizeParameters
画像URLに付 [加するクエリ文字列パラメータ](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/the-image-size-parameters.html) 。
前の表に挙げたプロパティに加え、NextImageコンポーネントは[Next.js画像コンポーネントのすべてのプロパティ](https://nextjs.org/docs/api-reference/next/image) をサポートしていますが、srcを除きます。
> !注srcプロパティを追加すると、コンポーネントからエラーが発生します。 srcプロパティを通じて画像ソースURLを直接提供するには、next/imageコンポーネントを使用する必要があります。
## 例
NextImageコンポーネントを使って、編集可能または編集不可のレスポンシブ画像を表示できます。
### 単純な画像
以下の例は、レスポンシブで最適化され、編集可能な画像を表示する方法を示しています。
### 画像サイズパラメータを持つ高度な画像
以下の例は、リサイズと編集をコントロールできる編集不可画像の表示方法を示しています:
この例では:
- editable - 画像がSitecoreエクスペリエンスエディターで編集できるかどうかを制御します。
- unoptimized\- ソース最適化next/image無効化し、代わりにimageParams
- imageParams - 画像 [のサイズパラメータ](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/the-image-size-parameters.html "The image size parameters") をサーバー側で画像のサイズ変更のためにSitecoreに渡します。
> !重要JSSはメディアURLのセキュリティハッシュをサポートしていないため、[これらのパラメータセットはサーバー上でホワイトリスト化](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/media-handler.html "Media Handler")する必要があります。