チャプター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 コンポーネントを提供します。

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

next/image は、HTML の <img> 要素を拡張し、モダンなウェブ向けに進化させたものです。

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

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

画像コンポーネントの使用

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

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

画像は常に、累積レイアウトシフト（CLS）を回避するようにレンダリングされます。これは、Google が検索ランキングに使用するコアウェブバイタルです。

ここでは、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 リファレンスを参照してください。