next/image は <img> タグのNext.js最適化版です。手動で実装する必要があるイメージパフォーマンスのベストプラクティスのスタックを自動的に適用します。
tsx
;
() {
(
);
}
next/image は <img> タグのNext.js最適化版です。手動で実装する必要があるイメージパフォーマンスのベストプラクティスのスタックを自動的に適用します。
;
() {
(
);
}
srcset — 複数のサイズを生成し、各デバイスが適切なものをダウンロードします。priority で上書き可能)。width/height (または fill) は領域を予約し、画像読込時にページが跳びません。placeholder="blur" は読込中に小さくぼかされたプレビューを表示します。<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
画像が配置されたパレントを埋める場合は fill を使用します (固定幅/高さの代わりに) — ヒーロー/カバー画像に一般的です。
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
画像は通常ページで最も重いアセットであり、Core Web Vitals (LCP、CLS) の不良の主な原因です。next/image はリサイズ、モダンフォーマット、レスポンシブ srcset、遅延読込、レイアウトシフト防止を自動化します — パフォーマンスの大きな課題を単一コンポーネントに変え、LCP 画像用の priority が覚えておく必要がある唯一のノブです。