vercel로 프로젝트를 배포했는데, 로컬에서는 이미지가 잘 불러와지지만 배포된 링크에서는 이미지가 제대로 가져와지지 않고, 402 payment Required 오류가 뜨는 것을 알 수 있었다.
때문에 해당 부분에 대해서 찾아보았는데, Next.js에서 제공하는 Image 컴포넌트의 최적화 횟수의 제한을 넘어섰기에 이미지를 불러올 수 없었던 것이다.
때문에 그냥 img 태그로 변경하여 간단하게 문제를 해결할 수 있었다. Image 태그가 자동으로 최적화시켜주는 건 좋긴 하지만, 무료 버전에서 이렇게 제한적이라면 계륵이 아닐까 하는 생각도 든다...
// 변경 전
<Image
src={pokemon.sprites.front_default}
width={100}
height={100}
alt={pokemon.korean_name}
className="mx-auto"
/>
// 변경 후
<img
src={pokemon.sprites.front_default}
width={100}
height={100}
alt={pokemon.korean_name}
className="mx-auto"
/>
배포까지 넥스트 개인과제를 잘 마무리한 것 같아 다행이다. 다음 주부터는 끝날 때까지 쭉 이어지는 팀 프로젝트 중 심화 프로젝트가 시작되기에, 주말 간 마음을 잘 가다듬어야할 것 같다.