Next.js 이미지 최적화 — next/image 완벽 활용

기본 사용법

import Image from "next/image";

// 로컬 이미지 (자동 크기 감지)
import heroImg from "./hero.jpg";
<Image src={heroImg} alt="히어로" priority />

// 리모트 이미지
<Image
  src="https://example.com/photo.jpg"
  alt="사진"
  width={800}
  height={600}
  sizes="(max-width: 768px) 100vw, 50vw"
/>

리모트 패턴

// next.config.ts
images: {
  remotePatterns: [
    { protocol: "https", hostname: "**.example.com" },
  ],
}

자동으로 WebP/AVIF 변환, lazy loading, srcset 생성이 됩니다.