kingsubin

Next export 시 Image Optimization 설정 문제 본문

JavaScript & TypeScript

Next export 시 Image Optimization 설정 문제

kingsubin 2022. 1. 3. 18:44

문제점

  1. Next.js project 에서 정적 배포를 하기 위해 next export 시도함.
  2. 에러 발생
    • 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.

해결과정

  1. Vercel이 아닌 AWS 배포 예정이어서 3번 방법인 third-party loader 설정 시도
  2. next-optimized-images 설치, config 설정 변경 후 다시 export
  3. 에러 발생
    1. TypeError: unsupported file type: undefined (file: undefined)
    2. 전체 이미지가 아니라 일부 이미지에서만 이렇게 발생했고 ImageSize 관련 에러 메시지가 나오지만 자세히 안나오고 디버그 모드로도 안 찍힘.
  4. built-in Loaders 에서 loader 변경해서 시도함.
    1. imgix → 똑같은 에러 메시지로 실패
    2. akamai → 성공
// next.config.js
moduel.exports = {
    images: {
        loader: 'akamai',
        path: '/',
    }
}
반응형

'JavaScript & TypeScript' 카테고리의 다른 글

브라우저, JS 흐름 정리 메모  (2) 2022.05.22
Udemy 클린코드 JS 강의 정리  (1) 2022.01.06
TypeORM synchronize true 시 이전 table 까지 생성 문제  (2) 2021.12.26
axios  (0) 2020.12.13
react-router-dom  (0) 2020.12.13
3 Comments
댓글쓰기 폼