Next.js Image Optimization を実務で活用するパターン集
\n\n
はじめに
\n
Next.jsの Image Optimization は、単なる便利機能ではなく、実務プロジェクトにおいてパフォーマンス改善と開発効率の両立を実現する重要な機能です。本記事では、教科書的な説明ではなく、実際のプロジェクトで直面する課題と、その解決パターンを具体的なコードで紹介します。
\n\n
Next.js Image Optimization の基本理解
\n
Next.jsの Image コンポーネントは、以下の最適化を自動で行います：
\n
- \n
- 画像フォーマットの自動変換（WebP対応）
- レスポンシブ画像のサイズ最適化
- 遅延読み込み（Lazy Loading）
- Cumulative Layout Shift（CLS）の防止
\n
\n
\n
\n
\n\n
これらの機能により、ページの読み込み速度が向上し、SEO順位の改善にも直結します。しかし、実務では「どうやって使い分けるか」という判断が重要になってきます。
\n\n
業務でのユースケース
\n\n
ユースケース1：ECサイトの商品画像管理
\n
ECサイトでは、数千〜数万の商品画像を扱うため、最適化の有無で読み込み速度に大きな差が出ます。ユーザーが商品一覧ページを訪れた際に、すべての商品画像を最初から読み込むと、初期表示が非常に遅くなります。
\n\n
ユースケース2：ブログサイトのアイキャッチ画像
\n
ブログ記事のアイキャッチ画像は、品質を落とさずにファイルサイズを削減する必要があります。複数解像度への対応も課題になります。
\n\n
ユースケース3：マーケティングダッシュボード
\n
管理画面では、ユーザーアバターやサムネイル画像が多数表示されます。これらを効率良く表示しながら、キャッシュを活用して応答性を高めることが求められます。
\n\n
実装コード：実務パターン
\n\n
パターン1：ECサイトの商品一覧ページ
\n\n
商品一覧ページでは、複数の商品画像を高速に読み込みつつ、各デバイス向けに最適なサイズを提供する必要があります。以下は実際のプロダクションコードです。
\n\n
// components/ProductCard.tsx\nimport Image from 'next/image';\nimport { useState } from 'react';\n\ninterface ProductCardProps {\n id: string;\n name: string;\n imageUrl: string;\n price: number;\n discount?: number;\n}\n\nexport const ProductCard = ({\n id,\n name,\n imageUrl,\n price,\n discount,\n}: ProductCardProps) => {\n const [isImageLoading, setIsImageLoading] = useState(true);\n\n // CloudFlareやAwsなどの画像最適化サービスを使う場合\n const getOptimizedImageUrl = (url: string): string => {\n // 外部CDNを利用する場合はここで処理\n if (url.includes('cloudinary')) {\n return `${url}?q=auto&f=auto`;\n }\n return url;\n };\n\n return (\n \n \n setIsImageLoading(false)}\n className={`transition-opacity duration-300 ${\n isImageLoading ? 'opacity-0' : 'opacity-100'\n }`}\n sizes=\"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw\"\n />\n \n {name}
\n \n {discount ? (\n <>\n ${price}\n ${(price * (1 - discount / 100)).toFixed(2)}\n \n ) : (\n ${price}\n )}\n \n \n );\n};\n\n\n
// pages/products.tsx - 商品一覧ページ\nimport { GetStaticProps } from 'next';\nimport { ProductCard } from '@/components/ProductCard';\nimport { useState, useEffect } from 'react';\n\ninterface Product {\n id: string;\n name: string;\n imageUrl: string;\n price: number;\n discount?: number;\n}\n\ninterface ProductsPageProps {\n products: Product[];\n}\n\nconst ProductsPage = ({ products }: ProductsPageProps) => {\n const [displayProducts, setDisplayProducts] = useState([]);\n const [page, setPage] = useState(1);\n const ITEMS_PER_PAGE = 20;\n\n // クライアント側での無限スクロール対応\n useEffect(() => {\n setDisplayProducts(products.slice(0, ITEMS_PER_PAGE * page));\n }, [page, products]);\n\n const handleLoadMore = () => {\n setPage((prev) => prev + 1);\n };\n\n return (\n \n 商品一覧
\n \n {displayProducts.map((product) => (\n = async () => {\n // データベースから商品情報を取得\n const products = await fetchProductsFromDB();\n\n return {\n props: {\n products,\n },\n revalidate: 3600, // 1時間ごとに再生成\n };\n};\n\nexport default ProductsPage;\n \n\n
パターン2：ブログのアイキャッチ画像と複数解像度対応
\n\n
ブログ記事では、異なるデバイスで見栄えの良いアイキャッチ画像を表示する必要があります。さらに、SEO的にも最適化が重要です。
\n\n
// components/BlogArticleCard.tsx\nimport Image from 'next/image';\nimport Link from 'next/link';\nimport { ReactNode } from 'react';\n\ninterface BlogArticleCardProps {\n slug: string;\n title: string;\n excerpt: string;\n featureImage: {\n src: string;\n alt: string;\n };\n publishedAt: string;\n author: string;\n readTime: number;\n}\n\nexport const BlogArticleCard = ({\n slug,\n title,\n excerpt,\n featureImage,\n publishedAt,\n author,\n readTime,\n}: BlogArticleCardProps) => {\n // 公開日時のフォーマット\n const formattedDate = new Date(publishedAt).toLocaleDateString('ja-JP', {\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n });\n\n return (\n \n \n \n \n {title}\n
\n {excerpt}
\n \n 執筆者: {author}\n \n 続きを読む →\n \n \n \n \n );\n};\n\n\n
// pages/blog/[slug].tsx - ブログ詳細ページ\nimport { GetStaticProps, GetStaticPaths } from 'next';\nimport Image from 'next/image';\nimport Head from 'next/head';\n\ninterface BlogPost {\n slug: string;\n title: string;\n content: string;\n featureImage: {\n src: string;\n alt: string;\n };\n publishedAt: string;\n author: string;\n}\n\ninterface BlogPostPageProps {\n post: BlogPost;\n}\n\nconst BlogPostPage = ({ post }: BlogPostPageProps) => {\n const canonicalUrl = `https://yourdomain.com/blog/${post.slug}`;\n\n return (\n <>\n \n {post.title} \n \n \n \n \n \n {post.title}
\n \n \n \n );\n};\n\nexport const getStaticPaths: GetStaticPaths = async () => {\n const posts = await fetchBlogPostsFromDB();\n const paths = posts.map((post) => ({\n params: { slug: post.slug },\n }));\n\n return {\n paths,\n fallback: 'blocking',\n };\n};\n\nexport const getStaticProps: GetStaticProps = async ({\n params,\n}) => {\n const slug = params?.slug as string;\n const post = await fetchBlogPostBySlug(slug);\n\n if (!post) {\n return { notFound: true };\n }\n\n return {\n props: { post },\n revalidate: 86400, // 24時間ごとに再生成\n };\n};\n\nexport default BlogPostPage;\n \n\n
パターン3：ユーザーアバター画像の最適化
\n\n
ダッシュボードやユーザープロフィールでは、複数のアバター画像が表示されます。これらは外部ソースからの取得になることが多いため、ドメイン設定と動的なサイズ対応が重要です。
\n\n
// next.config.js\n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n images: {\n // 複数の画像ソースを許可\n domains: [\n 'gravatar.com',\n 'cdn.example.com',\n 'avatars.githubusercontent.com',\n 'images.unsplash.com',\n ],\n // 本番環境での画像最適化設定\n formats: ['image/avif', 'image/webp'],\n // 画像の最適化を有効化\n minimumCacheTTL: 60,\n // より多くのサイズを対応させる場合\n deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],\n imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],\n },\n};\n\nmodule.exports = nextConfig;\n\n\n
// components/UserAvatar.tsx\nimport Image from 'next/image';\nimport { useMemo } from 'react';\n\ninterface UserAvatarProps {\n userId: string;\n avatarUrl?: string;\n userName: string;\n size?: 'small' | 'medium' | 'large';\n}\n\nconst AVATAR_SIZES = {\n small: 32,\n medium: 64,\n large: 128,\n};\n\nexport const UserAvatar = ({\n userId,\n avatarUrl,\n userName,\n size = 'medium',\n}: UserAvatarProps) => {\n const pixelSize = AVATAR_SIZES[size];\n\n // フォールバック画像の生成（Gravatar API）\n const fallbackUrl = useMemo(\n () => `https://gravatar.com/avatar/${userId}?d=identicon&s=${pixelSize * 2}`,\n [userId, pixelSize]\n );\n\n const imageUrl = avatarUrl || fallbackUrl;\n\n return (\n \n {\n // 画像読み込み失敗時の処理\n (e.target as HTMLImageElement).src = fallbackUrl;\n }}\n />\n 
