2023.06.02[nextjs]

📖오늘 배운  것

next/Image 관련 경고들

오늘 next/Image를 사용하면서 다양한 경고를 만났었다. 지금 당장 기능에 영향을 미치는 건 아니지만 콘솔에 계속 경고가 뜨면 신경쓰이기에... 경고를 하나씩 처리하였다!

 

priority 관련 경고

Image with src "/_next/static/media/image2.d26e4b3a.jpg" was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold. Read more: https://nextjs.org/docs/api-reference/next/image#priority

이 경고는 해당 이미지가 LCP로 감지되는데 priority 설정이 안되어 있을 때 나타나는 것 같았다. 따라서 priority=true를 설정해주면 해결된다. 하지만 나같은 경우 priority=true를 설정했을 때 다른 경고가 나타났었다. ㅠ

 

preload 관련 경고

The resource
http://localhost:3000/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fimage3.cd6f8dc1.jpg&w=96&q=75
was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

해당 경고는 preload된 콘텐츠가 window가 로드된 후 몇 초 이내에 사용되지 않을 때 나타는 경고이다. 아마 priority 설정을 하면서 우선순위가 높아져 미리로드되는데 이 과정에서 문제가 생긴 것 같았다. 하지만 priority 설정을 없애면 또 다른 경고가 뜨는 상태! 

그래서 구글링을 통해서 placeholder를 설정해주었더니 해결되었다!

아래가 경고가 뜨지 않게 사용된 태그이다.

<Image
    src={src}
    width={87}
    height={130}
    placeholder='blur'
    blurDataURL={src.src}
    alt='추천 책장 책 표지'
    className='rounded-r'
/>

 

width/height 관련 경고

 

Image with src "/_next/static/media/image3.cd6f8dc1.jpg" 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.

사실 처음 만났던 경고가 이거이고 꽤나 애를 먹었다. 그 이유는 해당 이미지가 사용되고 있는 태그를 착각했기 때문...^^ 너비나 높이에 대한 경고인데 구글링을 해봤더니 부모 요소에 position= relative를 설정해두었을 때 종종 나타날 수 있는 경고라고 했다. 해결방법은 간단하다. Image 태그에서 width, height 설정한 것을 css에서 다시 명시해주면 된다. 

<Image
  src={localImg}
  width={80}
  height={110}
  alt='책 표지'
  className='w-[80px] h-[110px]'
/>

이렇게! (위의 경우는 tailwind를 사용중이라 calssName으로 css를 설정하고 있다.)

 

 

 

💭배운 점

오늘 Image 관련 경고는 다 만난 기분이다...ㅋㅋㅋㅋ 경고문이 무시하려면 할 수 있지만 되게 찝찝하고 해결하고 싶은 아이다.. 태그를 착각해서 헤매느라 시간을 이상하게 허비하긴 했지만 결국 다 해결되서 기쁘다! 경고문 뜻 찾으면서 next/Image에서 사용하는 props에 대해서도 쬐금 더 이해된 느낌?!