[Next.js] Image height auto 사용

 

next/image

Next.js 공식문서 : next/image

 

Next.js에서는 이미지최적화를 위해 Image 컴포넌트를 제공한다.

 

장점?

- Loader를 사용하여 url을 커스터마이징 할 수 있다.

- 자동으로 Lazy Loading을 제공해준다.

- 이미지 캐싱도 자동으로 해준다.

- 지정된 곳에서만 이미지를 받아오게 할 수 있다.

 

필수 Props로는 src를 작성해야 하고

layout이 fill이거나 정적으로 import 해오는 이미지를 제외하고는  width, height값을 필수적으로 작성해주어야 한다.

 

import NextImage from 'next/image';
import TestImage from 'public/assets/search-img.png';

// 사용 가능
<NextImage src={TestImage} />

 

이 외의 옵셔널 props의 경우 layout, loader, quality, priority, placeholder를 제공한다.

 

다양한 기능들을 제공해주지만

height를 무조건적으로 작성해주어야 해서 일일이 값을 계산하기가 좀 불편했다,

 

next에서 제공해주는 image컴포넌트를 사용하여 결과를 보니

span 태그로 감싸져있었고 다양한 속성들이 있었고 이것을 컨트롤한다면 auto처리가 가능할 것 같았다.

그래서 Next Image를 활용하여 커스텀 Image컴포넌트를 다시 만들었다.

 

✍ 코드 작성

import styled from '@emotion/styled';
import NextImage, { ImageProps as NextImageProps } from 'next/image';

interface ImageProps extends NextImageProps {
  width?: number | string;
}

const Image: React.FC<ImageProps> = ({ width = '100%', ...props }) => {
  return (
    <ImageWrapper width={width}>
      <NextImage layout="fill" objectFit="contain" {...props} />
    </ImageWrapper>
  );
};

export default Image;

const ImageWrapper = styled.div<Pick<ImageProps, 'width'>>`
  width: ${({ width }) => (typeof width === 'number' ? width + 'px' : width)};
  & > span {
    position: unset !important;
    & img {
      position: relative !important;
      height: auto !important;
    }
  }
`;

 

사용 시

<Image width={600} src="/assets/search-img.png" alt="검색배너" />

 

 

 

일단 이렇게 처리해서 사용은 했는데 기본적으로 next/image가 span 태그가 감싸져있고

추가적으로 내가 wrapper로 감쌌는데 태그들이 너무 중첩되는 것이 아닌가 하는 생각도 들긴 한다.