NEXT JS IMAGE 태그 400 error 해결방법

NEXT JS에서는 img 태그보다 성능이 좋고 최적화에 장점이 있는 Image 태그 사용을 권장하는 편이다.

문제점

그래서 적극적으로 사용을 하고 있었는데 개발서버에서는 분명 잘 동작하는 Image 태그가
배포를 하고 나니
네트워크 부분에서 400 에러가 발생하고 있었다.
응답부분을 확인해보니

"url" parameter is not allowed

해당 이미지에 url이 문제가 있던것인지.. 하지만 이미지 url을 주소창에 입력해보니 정상적으로 나왔다.
계속 해결방법을 알아보던 도중 대부분은 next.config.js 부분에 domains 부분만 다들 수정하고
다른 해결방법은 보이지 않았다.

그러던 도중 내 문제를 해결하는 방법을 알아냈다.
해결 스택오버플로우
위 링크에서 해결을 하게 되었는데

Image option중 loader기능을 활용하면 해결이 된다고 한다.
아직 정확히 loader 기능이 왜 해결을 해주는지 이유를 찾지 못했지만 너무 행복했다.
정말 몇 달 동안 잡고 있던 이슈였고, 해결하지 못해 img 태그를 사용했는데 드디어 해결책을 찾으니
나머지는 폭풍 개발만 남았다..
나와 같은 에러를 경험하신 분들에게 도움이 되었으면 좋겠다!!
❤️‍🔥
(원인을 알고계신분들은 댓글 달아주세요!!!.. 저도 찾게되면 게시글을 수정하겠습니다)