---
title: "JSS NextImageコンポーネント"
slug: "the-jss-nextimage-component"
abstract: "最適化された画像を提供し、ページのパフォーマンス指標を向上させましょう。"
---
# JSS NextImageコンポーネント

Next.jsは、ページロードとレンダリング性能を向上させる最適化された画像レンダリングコンポーネントであるnext/imageを提供します。JSSアプリケーションでNext.jsが提供するnext/imageコンポーネントを使いやすくするために、@sitecore-jss/sitecore-jss-nextjsパッケージはバージョン20.1.0でNextImageコンポーネントを導入しています。

NextImageコンポーネントはJSS Imageコンポーネントやnext/imageコンポーネントと同様に使えますが、NextImage追加のプロパティをサポートしています。

> !注21.6.1以前のJSSバージョンでは、NextImageコンポーネントはカスタムローダーを使用しています。

正しく使えば、next/image成分、JSS NextImage成分に似ています:

-   各デバイスごとに適切なサイズの画像を、最新の画像フォーマットで提供します。
-   ページの [視覚的安定性](https://web.dev/user-centric-performance-metrics/#types-of-metrics) が向上します。
-   ページ読み込み時間を短縮し、読み込みが遅く、視覚的に魅力的なプレースホルダーで改善します。
-   画像はローカルに保存されるかリモートに保存されていても、必要に応じてサイズを調整できます。

> !注NextImageコンポーネントを使用するには、@sitecore-jss/sitecore-jss-nextjsバージョン20.1.0以降にアップデートする必要があります。