Next.js 정적 내보내기 및 이미지 최적화 오류 해결

 

1. Next.js의 빌드를 진행할 때 다음과 같은 에러가 발생할 수 있다.

Image Optimization using the default loader is not compatible with export.

 

 

2. 해결 방법 - 에러를 방지하기 위해서 다음과 같이 설정하면 된다.

// root/next.config.ts
const nextConfig = {
  // Next.js가 정적 사이트를 빌드 시 생성하도록 지시하며, 이전의 next export 명령을 대체한다.
  output: "export",
 
  //  내장 이미지 최적화 API를 비활성화하여 정적 내보내기 중 빌드 오류가 발생하지 않게 한다.
  images: {
    unoptimized: true,
  },
 
  // 새로운 App Router와 파일 시스템 기반 레이아웃 기능을 빌드 시 활성화한다.
  experimental: {
    appDir: true,
  }
};
 
module.exports = nextConfig;