next 13, production 단계 에러

현업 개발자들과 이야기를 하다가보면 next.js 13이 좋지만 아직 안정화되어 있지 않고
계속해서 업데이트가 진행되다보니 변동사항이 생긴다.

 오늘 그 말을 실감했다..(develop 단계에서 아무런 에러도 없다가 배포를 하고 production 단계에서 좌측 사진과 같은 에러가 발생했다.)
 결론은 클라이언트 사이드에서 예외가 발생했으니 콘솔을 봐라. 콘솔을 봤더니 우측사진과 같은 모양이었다.
 무슨 해괴망측한 소리인가 봤다. 단지, 유추할 수 있었던 것은 production 단계에서 발생하는 에러들이라는 점. 배포는 버셀로 했기 때문에 배포단계에서의 문제는 아니라고 생각을 했고 next.js 에서 이런 에러가 발생하는지를 찾아봤다. 일단 production 단계 확인을 위해 build 후 실행을 했는데...

 떡하니 이런 경고가 발생했다.(하하..) 들어가보니 sharp를 설치해야하는데 본인들이 누락시켰다. 하지만 버셀 배포에는 적용되도록 해두었단다.. 그럼 어디서 발생한 에러일까 찾아봤다.

 먼저 Image에서 발생하는 에러인지를 확인해보기 위해 알아보니, Image에서 레거시 코드들이 있다는 것을 알게 되었다. 지금도 최적화시키는데에 필요한 것, 불필요한 것들을 나누고 있는 듯 했다..(이런게 계속 변동이 있고 불안정하다고 하나보다...) 그래서 그 코드들을 맞춰줬다. 일단은 에러가 사라진 것 같다?
 근데 같이 프로젝트를 하는 다른 분 PC에서는 계속 발생한다고 하는 것이었다. 뭐가 문제인거지.. 일단 production 단계에서 적용되는 다른 부분을 찾아보니, prefetch가 있었다. Link 컴포넌트를 사용할때 프리패칭하도록 도와주는 것인데 이것들을 제거해봤다. 결과적으로 해결 됐다!

 

 근데 이 똥 싸다가 만 느낌은 뭐지...