Error: Image Optimization using the default loader is not compatible with { output: 'export' }.

Next.js 블로그 제작기

Next.js에서 Image Optimization 사용 시 output: 'export' 설정과의 호환성 문제 해결 방법

Next.js를 사용하여 프로젝트를 구축하는 도중,
이미지 최적화 기능을 사용하려고 할 때 다음과 같은 에러가 발생할 수 있습니다.

이 에러는 Next.js의 이미지 최적화 기능이 output: 'export' 설정과 호환되지 않아서 발생합니다.
Next.js의 이미지 최적화 기능은 서버에서 이미지를 최적화하는 데 필요한 API를 사용하므로, 정적 사이트 생성(output: 'export') 모드에서는 동작하지 않습니다.

💡 해결 방법

에러 메시지에서 제안된 두 가지 해결 방법이 있습니다:

1. output: 'export' 설정 제거
2. 이미지 최적화 비활성화

1. output: 'export' 설정 제거

이 방법은 Next.js를 서버 모드로 실행하여 이미지 최적화 API를 사용할 수 있게 합니다.
하지만 이 방법은 정적 사이트 생성을 포기하고, 서버에서 실행하도록 설정을 변경하는 것입니다.

// next.config.js
module.exports = {
  // output: 'export', // 이 줄을 제거하거나 주석 처리합니다.
};

이 설정을 제거하면 Next.js는 서버 모드에서 실행되어 이미지 최적화 기능을 사용할 수 있습니다.

2. 이미지 최적화 비활성화

정적 사이트 생성 모드를 유지하면서 이미지 최적화 기능을 비활성화하는 방법입니다.
이 방법은 정적 사이트 생성 모드에서도 사용할 수 있습니다.

// next.config.js
module.exports = {
  output: 'export',
  images: {
    unoptimized: true,
  },
};

이 설정을 추가하면 Next.js의 이미지 최적화 기능이 비활성화되므로, 이미지 최적화와 관련된 에러가 발생하지 않습니다.

요약

정적 사이트 생성(output: 'export') 모드에서 Next.js의 이미지 최적화 기능을 사용하려면, next.config.js 파일에 다음 설정을 추가하여 이미지 최적화 기능을 비활성화해야 합니다.

module.exports = {
  output: 'export',
  images: {
    unoptimized: true,
  },
};

이렇게 하면 이미지 최적화와 관련된 에러를 해결할 수 있습니다.
정적 사이트 생성 모드를 유지하면서 Next.js 프로젝트를 성공적으로 실행할 수 있습니다.