Next 배포시 Image Optimization 에러

최근에 NextJs + Typescript 를 gh-pages를 통해 배포 진행 중에 생긴 이미지 로더 에러를 파헤쳐 보았습니다.

우선 에러 메시지를 살펴보자

Error: Image Optimization using Next.js' default loader is not compatible with next export.
Possible solutions:
Use next start to run a server, which includes the Image Optimization API.
Use any provider which supports Image Optimization (like Vercel).
Configure a third-party loader in next.config.js.
Use the loader prop for next/image.

해당 에러가 무슨 이유로 뜨는지 알아 보자

next/Image에서 임포트하는 <Image /> 컴포넌트의 default loader가 
next export에서는 지원되지 않기 때문에 발생하는 에러다. 

공식문서에 따르면 next.config.js 파일에 다음과 같은 설정을 추가하면 된다.

 module.exports = {
  images: {
    loader: 'imgix',
    path: [도메인 주소],
  },
};

이런식으로 설정을 해주면 이미지의 기본 주소값이 설정이 되어 이미지가 잘 로딩이 된다.

Reference

공식문서 - Vercel
Github - Issue

느낀점

배포 환경을 구현중인데 생각했던것보다 설정 해줘야 할것들이 많고 신경 써줘야 할 부분들이 많은거 같아 힘들다 😂