[Next.js] <Image /> 에러(경고) 해결

Next.js로 개발하면서 자주 마주친 에러(경고) 해결에 대해 기록해두려고 한다😅

⚠︎ 에러(경고) 메세지

Image with src ~~~ was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.

💡 해결

priority 속성을 추가하면 된다.

<Image src="/~~~" alt="~~~" width="150" height="150" />

➡

<Image src="/~~~" alt="~~~" width="150" height="150" priority />

⚠︎ 에러 메세지

Image with src has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.

💡 해결

style 속성을 추가해서 사이즈 변동이 있는 부분(width 또는 height)에 auto를 주면 된다.

<Image src="/~~~" alt="~~~" width="150" height="150" style={{ height: "auto" }} />