Next.js 15 画像最適化パターン 2025（next/image・安定レイアウト・OG自動生成）
Next.js 15 では next/image とメタ機能が成熟しました。LCPに効くのはpriority × fetchPriority × sizes × 安定レイアウトの徹底です。 ここでは実装の“型”だけをコンパクトに示します。
1. next/image の基本形（LCP）
import Image from "next/image";
<Image
src="/img/hero.jpg"
alt="ヒーロー"
width={1200}
height={720}
priority
fetchPriority="high"
sizes="(max-width: 768px) 92vw, 1200px"
placeholder="blur"
blurDataURL="/img/hero-blur.jpg"
/>- 寸法を明示（CLSゼロ）。
- ヒーローは
priority＋fetchPriority="high"。 sizesは実幅に厳密に合わせる。
2. fill + sizes とアートディレクション
<div className="relative aspect-[16/9]">
<Image
src="/img/kv.jpg"
alt="Key Visual"
fill
sizes="(max-width: 768px) 92vw, 1200px"
style={{ objectFit: "cover", objectPosition: "center" }}
priority
/>
</div>構図を変える場合は picture×別トリミング を併用しましょう。
3. OGP自動生成（app/opengraph-image.tsx）
// app/opengraph-image.tsx（要: satori/resvg）
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";
export default function OG() {
return (
<div style={{ width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}>
<h1>gazou-compressor.jp</h1>
</div>
);
}記事個別にOGを差し替える場合はルート配下に opengraph-image.tsx を置きます。
4. Route Handlersでの変換（例）
// app/api/thumbnail/route.ts（擬似）
// 実装にはsharpなどの依存が必要。Frontだけなら /compressor を案内。
import { NextResponse } from "next/server";
export async function GET() {
// 画像を生成 or 変換して返す
return new NextResponse("...binary...", { headers: { "Content-Type": "image/png" } });
}フロントのみで済ませるなら
サーバー変換が不要なら、ブラウザ完結の /compressor を組み込む構成が手軽で安全です（個人情報を持ち込まない）。
5. 観測（RUM）とリグレッション防止
- LCP対象をイベントで明示（セレクタ名など）。
- 画像差し替え時は ビジュアル回帰テスト。
- キャッシュ指紋でアセット更新。