Next.js & React AVIF 2026：実装ガイド [コード例]

ReactエコシステムでのAVIF

ReactとNext.jsはAVIF画像最適化のための優れたオプションを提供します。

Next.jsにはAVIFを含む自動最適化を持つImageコンポーネントが含まれています。

バニラReactや他のフレームワークでは、AVIFを効果的に統合するいくつかのアプローチがあります。

Next.js画像最適化

next/imageコンポーネントはAVIFを自動的に処理します。

Next.jsは自動的にブラウザサポートを検出し、AVIF、WebP、またはオリジナルを提供します。

import Image from 'next/image'

export default function Home() {
  return (
    <Image
      src="/product.jpg"
      alt="商品"
      width={800}
      height={600}
      // AVIFはサポートされていれば自動的に提供されます！
    />
  )
}

高度な設定

next/imageの動作をカスタマイズします。

• formats: フォーマットの優先順位。
• deviceSizes: レスポンシブ画像のブレークポイント。
• minimumCacheTTL: 最適化された画像のキャッシュ期間。

// next.config.js
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
    deviceSizes: [640, 750, 828, 1080, 1200],
    minimumCacheTTL: 60 * 60 * 24 * 365,
  },
}

バニラReact実装

Next.jsなしのReactプロジェクト向け。

この再利用可能なコンポーネントは各ブラウザに最適なフォーマットを自動的に提供します。

const OptimizedImage = ({ src, alt, ...props }) => {
  const avifSrc = src.replace(/\.(jpg|png)$/, '.avif');
  const webpSrc = src.replace(/\.(jpg|png)$/, '.webp');
  
  return (
    <picture>
      <source srcSet={avifSrc} type="image/avif" />
      <source srcSet={webpSrc} type="image/webp" />
      <img src={src} alt={alt} loading="lazy" {...props} />
    </picture>
  );
};

ビルドパイプライン

ビルド時に画像生成を自動化します。

// scripts/optimize-images.js
const sharp = require('sharp');
const glob = require('glob');

glob('public/images/**/*.{jpg,png}', async (err, files) => {
  for (const file of files) {
    await sharp(file).avif({ quality: 80 }).toFile(file.replace(/\.(jpg|png)$/, '.avif'));
    await sharp(file).webp({ quality: 85 }).toFile(file.replace(/\.(jpg|png)$/, '.webp'));
  }
});

パフォーマンスヒント

React画像をさらに最適化します。

• 優先読み込み: ファーストビュー画像にはpriority={true}を使用。
• プレースホルダー: より良いUXのためにblurプレースホルダー。
• 遅延読み込み: next/imageではデフォルト。
• サイズ指定: CLSを避けるためにwidth/heightを常に指定。

<Image
  src="/hero.jpg"
  priority
  placeholder="blur"
/>