Next.jsで学ぶReact講座（完全初心者向け・30日） | 第3章：Next.jsらしさ – 画像表示（Image）

React Next.js
スポンサーリンク

Next.jsの画像表示の全体イメージ

画像を出したいとき、ふつうのHTMLなら <img src="..."> を使いますよね。
Next.js でも <img> は使えますが、「Next.jsらしさ」が出るのは Image コンポーネントを使ったときです。

Image コンポーネントは、次のような面倒ごとをまとめて面倒見てくれます。

画像のサイズ最適化（必要なサイズだけ配信）
遅延読み込み（スクロールされるまで読み込まない）
レスポンシブ対応（画面幅に合わせた画像の配信）

「ただ表示できればいい」ではなく、「速くてきれいに表示する」ための仕組みが最初から入っているのが、Next.js っぽいところです。

Imageコンポーネントの基本

最小の使い方

まずは、Next.js の Image コンポーネントの一番シンプルな使い方からです。

import Image from "next/image";

export default function Page() {
  return (
    <main style={{ padding: "32px" }}>
      <h1>プロフィール</h1>
      <Image
        src="/images/avatar.png"
        alt="プロフィール画像"
        width={120}
        height={120}
      />
    </main>
  );
}
TSX

ここでのポイントは3つです。

import Image from "next/image"; で Next.js の Image コンポーネントを読み込む。
src は画像のパス（public フォルダからの相対パス）。
width と height を必ず指定する（px 単位の数値）。

Next.js の Image は、サイズ（width / height）を必須 とすることで、
レイアウトのガタつき（CLS）を防ぎます。
「どれくらいの枠が必要か」を知った上で、そこに画像をはめ込んでくれるイメージです。

画像ファイルは public フォルダに置く

Next.js では、public フォルダに置いたファイルは、ルート / からそのまま参照できます。

例えば、次のような構成にしておきます。

public/images/avatar.png

この場合、src は /images/avatar.png になります。

<Image src="/images/avatar.png" ... />
TSX

public は書かない、というのがポイントです。

通常の img との違い

パフォーマンス最適化が標準で効いている

HTML の <img> と Next.js の Image の違いをざっくり言うと、

<img>
「指定された画像をそのまま表示するだけ」

<Image>
「画面サイズ・解像度に応じて最適な画像を選び、必要なタイミングで読み込む」

という感じです。

Next.js の Image は、自動的にいろいろやってくれます。

必要なサイズに応じて画像を生成してくれる（オリジナル画像を適切にリサイズ）
ビューポート外の画像は遅延読み込み（lazy load）してくれる
デバイスの解像度に合わせて、きれいな画像を選んでくれる

ページ全体の表示速度やパフォーマンスを意識するなら、
できるだけ <img> より Image を優先する のが Next.js での基本です。

alt は必須と思っておく

Image でも img と同じく alt 属性はとても重要です。
画面読み上げ（アクセシビリティ）の面だけでなく、「画像が読み込めなかったときの代わりのテキスト」にもなるので、
何の画像か分かる alt を必ず書く癖 をつけておきましょう。

画像配置の基本パターン

固定サイズで表示する

一番シンプルなのは、「このサイズで表示したい」と決め打ちするパターンです。

<Image
  src="/images/logo.png"
  alt="サイトのロゴ"
  width={160}
  height={40}
/>
TSX

ロゴやアイコンなど、サイズが決まっているものはこれで十分です。
あとは CSS や親要素のスタイルで、位置や余白を調整します。

横幅に合わせて表示したい場合（layout=”responsive” 的な感覚）

App Router の next/image では、fill や sizes を使った書き方が主流です。
「横いっぱいに写真を表示したい」ような場合の基本形を一つ覚えておきましょう。

import Image from "next/image";

export default function Hero() {
  return (
    <div style={{ position: "relative", width: "100%", height: "240px" }}>
      <Image
        src="/images/hero.jpg"
        alt="ヘッダー画像"
        fill
        style={{ objectFit: "cover" }}
        sizes="(min-width: 768px) 960px, 100vw"
      />
    </div>
  );
}
TSX

ここでのポイントは、

親の div に position: relative と固定の高さ（ここでは 240px）を指定する。
Image に fill を指定すると、「親要素の中にぴったり広がる」表示になる。
objectFit: "cover" で、トリミングしつつ枠いっぱいに表示する。

「カードの上部に横長画像を敷く」「ヒーローセクションの背景に使う」など、
実務でよく出てくるパターンです。

テキストと画像を並べる

Next.js / React だからといって、配置の基本は CSS と同じです。
例えば「顔写真＋プロフィール文」を横並びにするなら、こんな感じです。

import Image from "next/image";

export default function ProfileCard() {
  return (
    <section
      style={{
        display: "flex",
        gap: "16px",
        alignItems: "center",
        padding: "16px",
        backgroundColor: "white",
        borderRadius: "8px",
      }}
    >
      <Image
        src="/images/avatar.png"
        alt="プロフィール画像"
        width={80}
        height={80}
        style={{ borderRadius: "50%" }}
      />
      <div>
        <h2>太郎</h2>
        <p>Next.js を勉強中のエンジニアです。</p>
      </div>
    </section>
  );
}
TSX

画像自体の「配置」は CSS で行い、
Image コンポーネントは「最適な画像を出す係」として使うイメージです。

よくあるエラーとハマりどころ

1. 外部URLの画像をそのまま使って怒られる

src="https://example.com/image.png" のように外部ドメインの画像を指定すると、
Next.js から「そのドメインを許可していません」というエラーが出ることがあります。

外部の画像を Image で使う場合は、next.config.js にドメインを追加する必要があります。

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "images.example.com",
      },
    ],
  },
};

module.exports = nextConfig;
TSX

初心者のうちは、まずは public フォルダに画像を置いて
/images/xxx.png で読むパターンに慣れるのがおすすめです。

2. width / height を指定していなくてエラー

Image は、基本的に width と height が必須です（fill を使う場合を除く）。
これがないと、Next.js が「レイアウトが決められない」と怒ってきます。

// ❌ よくある間違い（width / height がない）
<Image src="/images/logo.png" alt="ロゴ" />

// ✅ 正しい
<Image src="/images/logo.png" alt="ロゴ" width={160} height={40} />
TSX

画像の元サイズに合わせるか、
デザイン上表示したいサイズをしっかり指定するようにしましょう。

3. パスを間違えて「画像が出ない」

public フォルダにあるのに表示されないときは、パスの書き方をよく見直します。

例えば、ファイル構成がこうだとして：

public/images/avatar.png

次のように書くのが正解です。

<Image src="/images/avatar.png" ... />
TSX

ありがちなミスは、public を含めてしまうことです。

// ❌ 間違い
<Image src="/public/images/avatar.png" ... />
TSX

public という名前は「URL からは見えない」と覚えておきましょう。

4. layout が崩れる（画像の枠が読めていない）

fill を使うときに、親要素に position: relative や高さをつけ忘れると、
レイアウトが崩れたり、画像が見えなくなったりします。

fill を使う場合は、「親がちゃんと枠を持っているか」を必ず確認してください。

まとめと小さな練習

ここまでのポイントを整理すると、こうなります。

Next.js の Image コンポーネントは、画像の最適化や遅延読み込みなどを自動でやってくれる「賢い img」。
画像は public フォルダに置き、URL では /images/xxx.png のように public を付けずに指定する。
Image は src / alt / width / height を基本セットとして考え、レイアウトに応じて fill + objectFit のパターンも押さえておく。
よくあるエラーは「外部ドメイン許可」「width / height の付け忘れ」「パス間違い」「fill 使用時の親要素の指定不足」で、ここを意識できればハマりにくくなる。

練習としては、次のようなページを作ってみるといいです。

ページ上部に Hero 画像（横長・fill 使用）。
その下に丸いプロフィール画像＋自己紹介。
どちらの画像も Image コンポーネントで表示。

これが一通り動くと、「Next.js らしい画像表示」の感覚がかなりしっかり身につきます。

スポンサーリンク
タイトルとURLをコピーしました