[Next.js] Image 태그

Image 컴포넌트의 장점

• 자동 최적화 : 이미지 크기, 형식, 품질을 최적화하여 페이지 로딩 속도를 개선.
• 지연 로딩(Lazy Loading) : 화면에 보이는 이미지부터 로딩, 초기 렌더링 시간 단축.
• 반응형 크기 지원 : 다양한 뷰포트 크기에 따라 적절한 크기의 이미지를 로딩.
• 캐싱 지원 : CDN을 통해 효율적인 이미지 제공

---

기본 사용법

Image 컴포넌트는 next/image에서 제공되며, 아래와 같은 형태로 사용됩니다.

import Image from 'next/image';

<Image 
  src="/path/to/image.jpg" 
  alt="설명 텍스트" 
  width={500} 
  height={300} 
/>

 

필수 Prop

• src : 이미지의 경로(URL 또는 로컬 경로)
• alt : 이미지 대체 텍스트, 접근성(웹 접근성 표준)을 위해 필수

 

추가 Prop

• width, height : 픽셀 단위로 이미지 크기를 설정
• fill : 부모 요소에 맞춰 이미지가 꽉 차도록 설정

---

fill Prop 사용시 주의점

fill Prop은 이미지가 부모 컨테이너의 크기에 맞춰 렌더링되도록 합니다.

1. 부모 요소에 position: relative; 필수
2. 부모 요소는 반드시 너비와 높이를 정의

<div className="imageContainer">
  <Image 
    fill 
    src="/path/to/image.jpg" 
    alt="설명 텍스트" 
  />
</div>

.imageContainer {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* 비율 유지 */
}

 

---

외부 이미지 사용 - remotePatterns

Next.js의 Image 컴포넌트를 사용하여 외부 이미지를 렌더링하려면, 이미지가 로드될 도메인을 허용 목록에 추가해야 합니다. remotePatterns 옵션을 활용하여 세부적으로 도메인, 경로, 프로토콜 등을 지정할 수 있습니다.

---

remotePatterns 설정 예시

next.config.js 파일에 아래 설정을 추가하여 외부 이미지 경로를 허용합니다.

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: "https", // 외부 이미지 URL의 프로토콜
        hostname: "learn-codeit-kr-static.s3.ap-northeast-2.amazonaws.com", // 허용할 도메인
        port: "", // (선택 사항) 특정 포트를 사용하는 경우 지정, 없으면 빈 문자열
        pathname: "/watchit/**", // 특정 경로나 패턴 지정
      },
    ],
  },
};

• protocol : https 또는 http 지정. 보안을 위해 https 사용을 권장
• hostname : 이미지가 위치한 도메인.
• port : 사용하려는 이미지의 도메인이 특정 포트를 사용한다면 지정. 일반적으로 생략
• pathname : 경로와 패턴을 설정. *와 **를 사용해 범위 지정 가능
  1. /watchit/*:watchit 디렉토리의 최상위 파일만 허용
  2. /watchit/**:watchit 및 하위 모든 디렉토리의 파일 허용