이미지 최적화: next/image + CDN + WebP/AVIF

import Image from 'next/image';

export default function ProductCard({ product }: { product: Product }) {
  return (
    <div>
      <Image
        src={product.imageUrl}
        alt={product.name}
        width={400}
        height={300}
        priority={product.featured}  // LCP 후보
        placeholder="blur"
        blurDataURL={product.blurDataURL}
        sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
        style={{ objectFit: 'cover' }}
      />
    </div>
  );
}

// next.config.js
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    minimumCacheTTL: 60 * 60 * 24 * 30,  // 30일
    remotePatterns: [
      { protocol: 'https', hostname: 'cdn.example.com' },
      { protocol: 'https', hostname: '*.amazonaws.com' },
    ],
  },
};

// 빌드 타임 — plaiceholder
// pnpm add plaiceholder
import { getPlaiceholder } from 'plaiceholder';

async function getProduct(id: string) {
  const product = await db.product.findUnique({ where: { id } });

  const buffer = await fetch(product.imageUrl).then(r => r.arrayBuffer());
  const { base64 } = await getPlaiceholder(Buffer.from(buffer));

  return { ...product, blurDataURL: base64 };
}

// next.config.js
module.exports = {
  images: {
    loader: 'custom',
    loaderFile: './lib/cloudinary-loader.ts',
  },
};


// lib/cloudinary-loader.ts
export default function cloudinaryLoader({
  src, width, quality
}: { src: string; width: number; quality?: number }) {
  const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`];
  return `https://res.cloudinary.com/your-cloud/image/upload/${params.join(',')}/${src}`;
}

// 잘못 — 항상 1920px 다운로드
<Image src="/hero.jpg" alt="" fill />

// 올바름 — 화면 크기별 적합 이미지
<Image
  src="/hero.jpg"
  alt=""
  fill
  sizes="(max-width: 768px) 100vw, (max-width: 1280px) 80vw, 1280px"
/>


// 그리드 카드 (3열)
<Image
  src={p.url}
  alt={p.name}
  width={400}
  height={300}
  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
/>

✅ next/image 사용 (자동 최적화)
✅ priority on LCP image (히어로 이미지)
✅ alt 속성 (접근성)
✅ width/height 또는 fill (CLS 방지)
✅ sizes 정확히 (네트워크 절약)
✅ placeholder=blur (UX)
✅ formats: avif/webp (next.config)
✅ remotePatterns 설정 (외부 이미지)