アセット

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

public ディレクトリは robots.txt、Googleサイト認証、その他の静的アセットにも便利です。詳細については、静的ファイル配信のドキュメントを参照してください。

プロフィール画像のダウンロード

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

• .jpg 形式でプロフィール画像をダウンロードする（またはこのファイルを使用）
• public ディレクトリ内に images ディレクトリを作成
• 画像を public/images ディレクトリに profile.jpg として保存
• 画像サイズは約400px × 400pxが適当
• 使用しないSVGロゴファイルは public ディレクトリ直下から削除可能

最適化されていない画像

通常のHTMLでは、プロフィール画像を次のように追加します：

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

ただし、これでは以下の点を手動で処理する必要があります：

• 異なる画面サイズでのレスポンシブ対応
• サードパーティツールやライブラリを使った画像最適化
• ビューポートに入ったときのみ画像をロード

などです。代わりに、Next.jsはこれらを自動的に処理する Image コンポーネントを提供しています。

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

next/image は、モダンなWeb向けに進化したHTML <img> 要素の拡張です。

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

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

Imageコンポーネントの使用

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

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

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

以下は、プロフィール画像を表示するための next/image の使用例です。height と width プロップは、ソース画像と同じアスペクト比の希望するレンダリングサイズにする必要があります。

注： このコンポーネントは後ほど「レイアウトの調整」で使用します。今すぐコピーする必要はありません。

import Image from 'next/image';
 
const YourComponent = () => (
  <Image
    src="/images/profile.jpg" // 画像ファイルのパス
    height={144} // 正しいアスペクト比の希望サイズ
    width={144} // 正しいアスペクト比の希望サイズ
    alt="Your Name"
  />
);

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

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