Web制作者必見！古のimage-proxy.jsを捨てて、Next.jsのnext/imageでCMS画像を徹底的に最適化する手順

Web制作者必見！古のimage-proxy.jsを捨てて、Next.jsのnext/imageでCMS画像を徹底的に最適化する手順 のビジュアル
  • 公開日
  • 最終更新
  • 読了目安約6分

WordPress時代の負債コードとなりがちなimage-proxy.jsを廃止し、Next.jsとヘッドレスCMS（microCMS）を組み合わせたモダンな画像配信基盤の構築法を解説。
Next.jsの<Image>コンポーネントを使い、パフォーマンスと保守性を両立させる具体的な設定手順と、移行によるTCO削減効果を解説します。

  • 負債コードの正体WordPressプラグインなどに依存したimage-proxy.jsは、パフォーマンスとセキュリティのボトルネックになりがちです。
  • Next.js <Image>の力Next.js標準の画像コンポーネントは、自動でWebP変換、遅延ロード、サイズ最適化を行い、開発者が意識せずに高速化を実現します。
  • microCMS連携の鍵microCMSから提供されるオリジナルURLを<Image>コンポーネントに渡し、Next.jsのImage Optimization機能で最適化することが最善策です。
  • TCO削減画像処理サーバーや古いスクリプトの運用保守コストがなくなり、トータルコストが削減されます。

導入：あなたの画像配信は「負債コード」になっていませんか？

近年、Webサイトのパフォーマンス向上は、SEOだけでなくユーザー体験（UX）においても不可欠な要素となっています。特に、画像配信はページの描画速度に最も影響を与える要因の一つです。

あなたの開発現場では、まだ古いWordPress環境で用いられていたimage-proxy.jsのような画像処理スクリプトに依存していませんか？もしそうであれば、それはモダンな環境への移行を阻む「負債コード」となっている可能性が高いです。

WordPress時代の画像処理の課題と限界

WordPressや旧式のCMSで、画像を動的にリサイズ・変換するために導入されていたのが、サーバーサイドで処理を行うプロキシスクリプトです。この方式は、以下のような根本的な課題を抱えています。

  • 処理速度の遅延: リクエストごとにサーバーが処理を行うため、サイトの規模が大きくなるほどボトルネックになります。
  • メンテナンスの複雑化: スクリプト自体の脆弱性対応や、OS・ミドルウェアのバージョンアップ時に動作しなくなるリスクがあります。
  • キャッシュ制御の難しさ: CDNやブラウザキャッシュを最適化するための設定が複雑になりがちです。

なぜ今、image-proxy.jsからの脱却が必要なのか？

Next.jsやmicroCMSのようなヘッドレスCMSを採用する目的は、高いパフォーマンスと開発体験（DX）の実現にあります。古いプロキシスクリプトを温存してしまうと、せっかくのモダン環境のメリットを打ち消してしまいます。

負債コードを解体し、Next.jsのImage Optimization機能へと移行することで、真に高速で、かつ保守性の高い画像配信を実現できます。

Next.js + microCMS環境における画像配信の理想形

Next.jsの<Image>コンポーネントがもたらす革新

Next.jsの<Image>コンポーネントは、画像配信の常識を変えました。

これは、単なるHTMLの<img>タグのラッパーではありません。ビルド時、またはリクエスト時に、Next.jsのサーバー（Vercelなど）が画像を最適化し、以下の処理を自動で行います。

  • 遅延ロード（Lazy Loading）: ビューポートに入るまで画像の読み込みを遅延させます。
  • レスポンシブなサイズ設定: デバイスのサイズに応じて最適なサイズの画像を配信します。
  • モダンフォーマットへの変換: WebPなど、より軽量な画像フォーマットに自動変換します。

これにより、開発者は煩雑な設定なしに、Core Web Vitalsの指標を大幅に改善できます。

microCMSの画像URLをNext.jsで活用するための基本戦略

microCMS（や他のヘッドレスCMS）の画像アセットは、そのコンテンツプロバイダのCDN（例: images.microcms-assets.io）から配信されます。

最適な戦略は、microCMSから取得したオリジナルの画像URLを、そのままNext.jsの<Image>コンポーネントのsrc属性に渡すことです。Next.jsがそのURLから画像をフェッチし、内蔵の画像最適化機能（Image Optimization）で処理した上で、最適化された画像を配信してくれます。

image-proxy.jsを廃止し、最適化を実装する3ステップ

ここからは、実際にimage-proxy.jsへの依存を断ち切り、Next.jsの標準機能に移行するための具体的な手順を解説します。

Step 1: microCMS画像URLをそのまま利用できるNext.jsの設定

まずは、Next.jsが外部ドメインの画像を最適化できるように設定を行います。next.config.jsファイルに、microCMSの画像ドメインを許可リストとして追加します。

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  // ... その他の設定
  images: {
    domains: ['images.microcms-assets.io'], // microCMSの画像ドメインを追加
  },
};

module.exports = nextConfig;

Step 2: next.config.jsに画像ドメインを追加する

上記のStep 1で実施済みですが、画像が複数のドメインから配信されている場合は、全てをdomains配列に追加する必要があります。万が一、画像配信元が今後増える可能性がある場合は、安全のために許可するプロトコル、ホスト名、ポートなどをより詳細に指定できるremotePatternsの使用も検討してください。

Step 3: <Image>コンポーネントへの置き換えと最適化パラメータの設定

CMSから取得した画像URL（例: https://images.microcms-assets.io/assets/example-id/image.jpg）を、コンポーネントで利用します。

// Before (負債コードの利用 or 通常のimgタグ)
<img src={cmsData.thumbnailUrl} alt={cmsData.title} />

// After (Next.jsの`<Image>`コンポーネント)
import Image from 'next/image';

<div style={{ position: 'relative', width: '100%', height: '300px' }}>
  <Image
    src={cmsData.thumbnailUrl} // microCMSから取得したURLをそのまま利用
    alt={cmsData.title}
    layout="fill" // 親要素のサイズに合わせる
    objectFit="cover" // 親要素内で画像をカバーする
    priority // LCP対策としてファーストビューの画像には設定
  />
</div>

<Image>コンポーネントは、widthとheightを指定するか、layout="fill"として親要素のサイズにフィットさせる形で利用するのが一般的です。この置き換え作業をもって、旧来のimage-proxy.jsは不要となり、プロジェクトから削除できます。

画像最適化の実現による効果とTCO削減

パフォーマンススコアの向上とユーザー体験の改善

Next.jsのImage Optimizationに移行することで、LighthouseやCore Web Vitalsのスコアは劇的に改善します。特に「Largest Contentful Paint (LCP)」や「Cumulative Layout Shift (CLS)」の改善に大きく貢献し、結果としてSEO評価の向上に直結します。

負債コードの保守・運用コストからの解放

image-proxy.jsのような独自スクリプトを廃止することで、TCO（Total Cost of Ownership）が削減されます。

  • 開発コスト: スクリプトのアップデートやバグ対応が不要に。
  • インフラコスト: サーバーサイドでの画像処理負荷がなくなり、サーバーリソースを節約。

モダンなフレームワークの標準機能に移行することは、未来の保守性を担保する上での重要な戦略的投資です。

まとめ：モダンな環境への移行は画像最適化から始めよう

Next.jsとmicroCMSによるモダンスタックの力を最大限に引き出すためには、画像配信における負債を清算することが必須です。image-proxy.jsの廃止は、その第一歩として非常に効果的です。

これを機に、サイト全体のパフォーマンスと開発体験を向上させましょう。

参考リンク

この記事は役に立ちましたか？