[FE / REACT] Next.js Image 이슈

Next.js 13버전을 사용 중이였고

Next.js에서는 img 태그 대신 Next에서 제공하는 Image 컴포넌트 사용을  권장한다.

Image태그를 사용하면 

• lazy loading
• 이미지 사이즈 최적화
• placeholder 제공

의 장점을 가지고 있다고 한다

 

그러나, Image 태그를 사용할 때 사이즈 오류가 생기는 경우가 많은데

width, height 를 지정해줘도 이미지 사이즈가 지정값보다 작거나 크면

사이즈 속성이 제대로 먹히지 않는다

 

그렇다 보니 상위요소에 너비랑 높이를 지정해주고

objectFit과 layout={fill} 속성을 사용해주는 방식으로 해결해나가고(?) 있었는데

자꾸

 

 

Image with src "/sample/accommodation.png" has legacy prop "objectFit". Did you forget to run the codemod?

이런 오류가 콘솔창에 뜨더라..

 

왜 objectFit 속성을 쓰냐고!!! 묻는데.

그럼 해결법이 뭔데? 하고 물으니

https://nextjs.org/docs/messages/next-image-upgrade-to-13

 

공식문서에 나와있다고 한다

13버전 이후부터는 Image 컴포넌트에서 objectFit과 layout 속성은 사라졌다고..

 

대신 fill 을 사용하라고!

 

그리고 해결될 줄 알았는데 다음으로는 이런게 뜬다

 

Image with src "/_next/static/media/Rectangle-70.642ac878.png" has "fill" but is missing "sizes" prop. Please add it to improve page performance. Read more:

 

fill 속성을 사용하는데 왜 sizes 속성을 사용 안하냐고..

 

Next가 제공하는 Image의 경우 sizes의 값을 지정해주지 않으면 디폴트 값으로 100vw로 세팅된다고 한다..

 

그래서

 

sizes="(max-width: 480px) 100px, (max-width: 320px) 80px, 60px"

 

이렇게 크기에 맞게 넣어주었더니 해결 되었다!

 

 

 

참고 : 

Next/Image를 활용한 이미지 최적화 | 카카오엔터테인먼트 FE 기술블로그 (kakaoent.com)