Next.js의 이미지 최적화
Frontend/Next.js
기본 사용법Next.js에서는 이미지 최적화를 위해 next/image컴포넌트를 사용한다.import Image from 'next/image'src: 이미지 소스 URLwidth 및 height:필수 속석으로, 이미지의 원본 크기를 지정레이아웃 시프트 방지 및 적절한 공간 확보에 사용반응형 이미지 설정 방법alt: 접근성을 위한 대체 텍스트quality:선택적 속성으로, 1-100 사이의 값 지정(기본값 75)WebP 등으로 변환 시 이미지 품질 조절에 사용 Next.js는 이 정보를 바탕으로 자동 WebP 변환, 레이지 로딩, 디바이스 크기에 맞는 이미지 제공 등의 최적화를 수행한다. 외부 이미지 사용외부 이미지를 사용할 경우, next.config.mjs에 다음과 같이 설정해줘야만 해당 이미지 주소..