アセット

Next.jsは、画像のような静的アセットを、トップレベルのpublicディレクトリの下で提供できます。public内のファイルは、pagesと同様に、アプリケーションのルートから参照できます。

publicディレクトリは、robots.txt、Googleサイトの検証、およびその他の静的アセットにも役立ちます。詳細については、静的ファイル提供のドキュメントをご覧ください。

プロフィール写真をダウンロードする

まず、プロフィール写真を取得しましょう。

• .jpg形式でプロフィール写真をダウンロードします（または、このファイルを使用します）。
• publicディレクトリ内にimagesディレクトリを作成します。
• public/imagesディレクトリに写真をprofile.jpgとして保存します。
• 画像のサイズは、約400px x 400pxにすることができます。
• publicディレクトリの直下にある未使用のSVGロゴファイルを削除してもかまいません。

最適化されていない画像

通常のHTMLでは、プロフィール写真を次のように追加します。

<img src="/images/profile.jpg" alt="Your Name" />

ただし、これは手動で処理する必要があることを意味します。

• さまざまな画面サイズで画像がレスポンシブであることを保証する
• サードパーティのツールまたはライブラリを使用して画像を最適化する
• ビューポートに入ったときにのみ画像をロードする

など。代わりに、Next.jsはこれを処理するために、すぐに使えるImageコンポーネントを提供しています。

Imageコンポーネントと画像の最適化

next/imageは、HTMLの<img>要素を拡張したもので、現代のWeb向けに進化しました。

Next.jsは、デフォルトで画像の最適化もサポートしています。これにより、ブラウザがサポートしている場合に、WebPのような最新の形式で画像をリサイズ、最適化、および提供できます。これにより、小さなビューポートを持つデバイスに大きな画像を配信することを回避できます。また、Next.jsは将来の画像形式を自動的に採用し、それらの形式をサポートするブラウザに提供できます。

自動画像最適化は、あらゆる画像ソースで機能します。画像がCMSのような外部データソースでホストされている場合でも、最適化できます。

Imageコンポーネントの使用

Next.jsは、ビルド時に画像を最適化するのではなく、ユーザーが要求したときにオンデマンドで画像を最適化します。静的サイトジェネレーターや静的のみのソリューションとは異なり、10枚の画像を配信する場合でも、1000万枚の画像を配信する場合でも、ビルド時間が長くなることはありません。

画像はデフォルトで遅延ロードされます。つまり、ビューポート外の画像によってページ速度が低下することはありません。画像は、ビューポートにスクロールされるにつれてロードされます。

画像は、Googleが検索ランキングに使用するCore Web VitalであるCumulative Layout Shiftを回避するように常にレンダリングされます。

next/imageを使用してプロフィール写真を表示する例を次に示します。heightおよびwidthプロパティは、ソース画像と同一のアスペクト比で、目的のレンダリングサイズである必要があります。

注：このコンポーネントは、後で「レイアウトの改善」で使用します。まだコピーする必要はありません。

import Image from 'next/image';

const YourComponent = () => (
  <Image
    src="/images/profile.jpg" // Route of the image file
    height={144} // Desired size with correct aspect ratio
    width={144} // Desired size with correct aspect ratio
    alt="Your Name"
  />
);

自動画像最適化の詳細については、ドキュメントをご覧ください。

Imageコンポーネントの詳細については、next/imageのAPIリファレンスをご覧ください。