章12

アセット

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>要素の拡張です。

Next.jsは、デフォルトで画像最適化もサポートしています。これにより、画像のサイズ変更、最適化、そしてブラウザが対応していればWebPのような最新形式での画像提供が可能になります。これにより、ビューポートが小さいデバイスに大きな画像を送信することを避けられます。また、Next.jsは将来の画像フォーマットを自動的に採用し、それらのフォーマットをサポートするブラウザに提供することも可能になります。

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

Imageコンポーネントの使用

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

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

画像は常に、累積レイアウトシフト (Cumulative Layout Shift)（Googleが検索ランキングに利用するCore Web Vitalの1つ）を避けるようにレンダリングされます。

以下は、プロフィール画像を表示するために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リファレンスを確認してください。