Error: Invalid src prop on next/image

⛔문제상황

supabase storage에 업로드 된 내용을 받아와 표시하려고 시도하자

Error: Invalid src prop (https://[수퍼베이스id].supabase.co/storage/v1/object/public/thumbnail/이미지.jpg) on next/image, hostname “[수퍼베이스id].supabase.co” is not configured under images in your next.config.js See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

에러가 발생했다!

🤔이유

next/image 컴포넌트를 활용하는 페이지 중 어떤 특정 페이지에서, next.config.js의 images.remotePatterns에 정의되지 않은 URL에 호스트 이름을 사용하는 src 값을 전달했기 때문!

쉽게 말해 next/image가 모르는 호스트 이름을 제공해서 next.js가 당황한거다. (아니 이게 뭐람?)

✅해결

공식문서에서 제공하는 방식을 그대로 사용해 주면 된다. next.config.js에 아래와 같이 작성한다.

내가 사용해야 할 host이름에 supabase Id가 들어가기 때문에 env 파일에 환경변수로 설정해 다음과 같이 작성해주었다.

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: process.env.NEXT_PUBLIC_HOST_NAME, 👈
        port: "",
        pathname: "/storage/v1/object/public/**", 👈
      },
    ],
  },
}

export default nextConfig

추가로, 까먹을까봐 정리하자면.. 만약 https://test.com/path1/path2/path3 이라는 경로가 주어졌다면,

name 종류	설명
hostname	URL의 호스트(도메인) 부분 test.com
pathname	URL의 경로 부분 /path1/path2/path3