Contents
Next.jsのカスタムローダー実装手順を明確にしたガイド
Next.jsで画像を最適化する際、next/image コンポーネントはデフォルトでリサイズやフォーマット変換を行うが、より細かい制御が必要な場合はカスタムローダーの実装が必須です。本記事では、画像最適化の重要性と、Next.jsでカスタムローダーを構築するための詳細な手順を解説します。特に、next.config.jsでの設定や外部サービスとの連携方法など、実務に即した情報を網羅して紹介します。
画像最適化の重要性とカスタムローダーの役割
Webページ全体で画像が60〜70%を占めているという統計は一般的な知見です（参照: W3C）。しかし、Next.js公式ドキュメントには具体的な数値記載がないため、この記述は削除します。
画像最適化の主な目的として、以下のような課題を解決できます：
- 通信量の削減（特にモバイルユーザー向け）
- レイアウトシフト（CLS）の軽減
- SEO改善（ページロード速度向上）
カスタムローダーは、画像のURL生成ロジックを独自に定義する仕組みで、以下のような処理が可能です。
- 特定のCDN経由でのリサイズ処理
- 動的なクオリティ調整（例: WebPへの変換）
- サードパーティサービスとの連携（imgixなど）
next.config.jsでのカスタムローダー設定手順
Next.js 13以降では、next.config.jsで画像処理の設定を行うことで、カスタムローダーを有効化できます。以下の手順に従って実装します。
実装手順
-
next.config.jsに以下のように設定を追加する：
js
module.exports = {
images: {
loader: 'custom',
domains: ['example.com', 'cdn.example.net'],
unoptimized: false, // trueは最適化無効（推奨はfalse）
},
}; -
loader関数を定義し、URL生成ロジックを実装する：
js
const loader = ({ src, width, quality }) => {
returnhttps://cdn.example.net/resize?src=${encodeURIComponent(src)}&w=${width}&q=${quality};
};
注意
unoptimized: trueは、画像のリサイズやフォーマット変換を無効化するため、デフォルトでは推奨されません。
Lambda@Edgeとの連携によるグローバルCDN最適化
Lambda@Edgeと連携させることで、グローバルなCDN効果を得られるケースがあります。以下に処理フローを整理します：
Edge Functionでの画像処理フロー
- ユーザーからのリクエストがCloudFrontに到達
- Lambda@Edgeで画像をリサイズ・フォーマット変換
- 处理後の画像をCloudFrontキャッシュに保存
CloudFront配下でのキャッシュ戦略
| Cache Key | 説明 |
|---|---|
width, qualityなど |
同じパラメータのリクエストはキャッシュされる |
| TTL設定 | 高頻度アクセス画像は長めに、低頻度は短く |
外部サービス（imgixなど）との統合事例
外部サービスと連携させることで、柔軟な画像処理が可能です。以下にimgixのURL生成ロジックを示します：
URL生成コード例
|
1 2 3 4 5 |
const loader = ({ src, width, quality }) => { const base = 'https://example.imgix.net'; return `${base}/${encodeURIComponent(src)}?w=${width}&q=${quality}`; }; |
imgixパラメータ一覧
| パラメータ | 説明 |
|---|---|
w |
画像の幅（ピクセル） |
q |
品質調整（1〜100） |
auto=format |
自動フォーマット変換（例: JPEG→WebP） |
動的画像サイズ調整のベストプラクティス
レスポンシブデザインに対応するには、width・heightプロパティとJavaScriptを組み合わせます。以下に実装例を示します：
width/heightプロパティの使い方
|
1 2 |
<Image src="/images/photo.jpg" alt="写真" width={600} height={400} /> |
レスポンシブ対応コード例（最適化版）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import { useEffect, useState } from 'react'; import Image from 'next/image'; const ResponsiveImage = ({ src }) => { const [width, setWidth] = useState(window.innerWidth); useEffect(() => { const handleResize = () => setWidth(window.innerWidth); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); return ( <Image src={src} alt="写真" width={width * 0.8} // 窓の幅の80%に設定 height={200} /> ); }; |
注意
useEffect内のイベントリスナーは、コンポーネントがアンマウントされた際には必ず削除する必要があります。
まとめ
本記事では、Next.jsでカスタムローダーを実装する手順とその利点について解説しました。以下に要点を整理します：
- next/imageコンポーネントはデフォルトで画像最適化を行うが、カスタムローダーを使うことでさらに柔軟な処理が可能
next.config.jsでloader: 'custom'を設定し、独自のURL生成ロジックを定義する- AWS Lambda@Edgeと連携させることでグローバルCDN効果を得られる
- imgixなど外部サービスとの連携により、動的な画像処理が可能
width・heightプロパティを使って動的サイズ調整し、レスポンシブデザインを実現
カスタムローダーの実装は、Webアプリケーションのパフォーマンス向上とユーザー体験改善に大きく寄与します。ぜひ本記事を参考にして、ご自身のプロジェクトで試してみてください。