[42gg] Next.js 이미지 최적화로 인한 문제 해결

오랜만에 42gg 다같이 모여서 작업했다.
그런데...!!

잘나오던 이미지가 안나오기 시작했다. 왜일까? 왜 안나올까?

📌 WHY

uri부터 확인해보니 우리가 넣어주지 않는 쿼리문이 붙어서 동작을 하고 있었다.
쿼리문이 있어서 이미지를 찾지 못하고 있던 것이다!!

원인을 찾아보니 Nextjs에서 이미지를 최적화하면서 발행하는 문제였다. 이미지 url에 쿼리문이 추가되어 이미지를 찾지 못했다.

이미지가 뜨지 않는 문제뿐만 아니라, 결과입력 모달창 등에서 뜨지 않는 이미지가 가장 앞쪽에 덮여 있어서 버튼이 눌리지 않는 등의 문제가 발생했다.

🛠 해결해보자

Next.js는 이미지를 사용할 때 html의 img태그가 아닌 next/image를 import해서 사용할 수 있다. 이것을 사용하게 되면 기본적으로 optimize 옵션이 활성화 된다. 이것이 활성화되면서 이미지가 최적화되고, 원본이미지의 url이 아닌 nextjs에서 생성한 url로 바뀌게 된다. next/image로 요청이 들어오면 내부적으로 imageOptimizer라는 함수를 실행시켜 결과물을 리턴시켜주는 과정을 거쳐서 발생하는 문제였다.

우선은 최적화 과정을 하지 않도록 해주었다.

 <Image
   src={userImageUri}
   alt='prfImg'
   layout='fill'
   objectFit='cover'
   sizes='30vw'
   quality='30'
   unoptimized={true} // 해당 옵션을 넣어주면 이미지 최적화를 하지 않는다.
 />

조금 아쉬운 부분😔은 모든 image 태그에 unoptimized 옵션을 추가해줘야 했는데, 이 부분을 config에서 처리해주고 싶어서 다양한 시도를 했지만 아직 처리해주지 못했다. 우선은 급한대로 모든 태그에 추가해준 상태이고 좀 더 찾아볼 필요가 있다!

⚙️최종 처리!

DB에서 cdn을 포함한 외부 url을 백엔드에서 S3서버에 올려 내부 uri로 바꿔 보내주었다. 하여 외부 ur를 사용할 때 발생한 Nextjs의 최적화 문제가 사라졌다. 이전에 처리했던 unoptimized 옵션은 다시 제거해주었다!

참고

• https://yeoulcoding.me/289
• https://velog.io/@hhhminme/Next.js%EC%97%90%EC%84%9C-Nextimage%EC%97%90%EC%84%9C-%EC%99%B8%EB%B6%80-%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A5%BC-%EB%AA%BB%EA%B0%80%EC%A0%B8%EC%98%A4%EB%8A%94-%EB%AC%B8%EC%A0%9C%EB%8F%84%EB%A9%94%EC%9D%B8-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-loader-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0