공식 문서를 보고도 헤맬 분들이 한 명쯤은 있을 듯하여 작성해 봅니다. 1.  bundle analyzer 설치우선, bundle analyzer를 설치해줘야 하는데요.npm i @next/bundle-analyzer# oryarn add @next/bundle-analyzer# orpnpm add @next/bundle-analyzer 저는 yarn을 사용해 설치를 했는데요, devDependencies에 저장했습니다.yarn add -D @next/bundle-analyzer cross-env 2. next.config.mjs 설정저는 next.config를 커스텀하지 않아서 초기세팅 상태의next.config.mjs 기준으로 설정했습니다.import withBundleAnalyzer from '@n..

회사에서 외주 프로젝트를 개발하다 문득 궁금해진 내용이 있었습니다. Next.js를 사용하면 Image 컴포넌트를 사용하는 것이 좋다고만 알았지왜 좋은지 전부 파악하지 못한 채로 사용하고 있었어요. 처음엔 Image 컴포넌트를 먼저 떠올리고 사용하는 이유만 포스팅하려고 했는데,디깅하다 보니 Next/image가 동작하는 원리와img 태그를 사용하면 좋을 때도 알고싶어졌습니다.그래서, 둘 다 포스팅하기로 했죠.Image 컴포넌트가 주는 안락함처음에는 local state에 따라 Image tag의 width와 height가동적으로 변하는 부분이 신경쓰였습니다. 이 때는 Image 컴포넌트가동적으로 변경되어지는 사이즈에 대해선 최적화를 못해줄 것이라 생각했지만이미지 최적화는 주로 런타임에 요청이 들어왔을 때..

warning 01 )/images/fortune_card_image_02.png" 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.warning 02 )/images/fortune_card_image_02.png" was detected as the Largest Contentful Paint (LCP).Please add the "priority" property if this image is above the..