Next.js Image 최적화 - 자동 이미지 최적화와 성능 개선

Next.js의 Image 컴포넌트는 이미지를 자동으로 최적화하고, 지연 로딩, 반응형 크기 조정 등을 제공합니다.
이 글에서는 next/image를 사용하여 이미지 성능을 개선하는 방법을 정리합니다.

---

1. 기본 사용법

import Image from "next/image";

function ProductCard({ product }: { product: Product }) {
  return (
    <div>
      <Image
        src={product.imageUrl}
        alt={product.name}
        width={500}
        height={300}
        priority={false} // 지연 로딩 (기본값)
      />
    </div>
  );
}

• width와 height를 명시해야 레이아웃 시프트(CLS)를 방지할 수 있습니다.
• priority={true}로 설정하면 지연 로딩을 비활성화합니다 (위치가 중요한 이미지에 사용).

---

2. 외부 이미지 도메인 설정

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "example.com",
        pathname: "/images/**",
      },
    ],
  },
};

• 외부 도메인의 이미지를 사용하려면 next.config.js에 도메인을 등록해야 합니다.

---

3. 반응형 이미지

<
  src=
  alt=
  fill
  sizes=
  style={{ :  }}
/>