에러 발생

400: BAD_REQUEST Code: INVALID_IMAGE_OPTIMIZE_REQUEST

에러 발생 이유

이미지 URL 또는 경로가 잘못되었거나, Next.js의 이미지 최적화 설정에 외부 이미지 도메인 허용 설정이 누락되어 발생하는 오류다. Next.js의 Image 컴포넌트는 Vercel의 이미지 최적화 기능을 통해 외부 이미지를 불러오는 경우 next.config.js 파일에 해당 도메인을 허용해야 한다. 그렇지 않으면 BAD_REQUEST 오류가 발생한다.

해결 방법

next.config.js 파일에 다음과 같은 이미지 설정을 추가하여 Supabase 또는 외부 이미지 URL을 허용된 도메인 목록에 추가한다.

// next.config.js
module.exports = {
  images: {
    domains: ["images.ctfassets.net"], // 사용할 이미지 도메인을 허용합니다.
    remotePatterns: [
      {
        protocol: "https",
        hostname: "images.ctfassets.net", // 프로토콜과 호스트명을 명시하여 외부 이미지 경로를 허용합니다.
      },
    ],
  },
};

Reference.
GitHub Discussion: Vercel Next.js Discussions - Invalid Image Optimize Request