프론트엔드 개발/트러블 슈팅1 배포 환경에서 Next.js 이미지 최적화 이슈 ("w" parameter (width) of ${width} is not allowed) 이슈 내용 next/image 컴포넌트 및 sizes 속성을 부여하여 렌더링하는 이미지가 로드에 실패하는 현상이 발생했습니다. 모든 스크린 사이즈에서 실패하는 것은 아니고 몇 개의 특정한 사이즈에서만 생기는 이슈였습니다. 로드에 실패한 이미지를 크롬 개발자도구의 네트워크 탭을 확인해보면 아래와 같은 에러 메시지와 함께 400 에러가 뜨는 것을 확인할 수 있었습니다. "w" parameter (width) of ${width} is not allowed 구글에 위의 에러메시지를 검색했을 때 검색 결과가 얼마 없었고, 크게 공론화된 이슈가 아니라는 것을 확인할 수 있었습니다. 경험적으로 봤을 때 이러한 경우는 원래 이슈가 문제라기보다는 설정값이 잘못되었다든지 엉뚱한 곳이 잘못된 경우가 대부분입니다. next.. 2022. 11. 14. 이전 1 다음