nextjs 외부 이미지를 사용할 때 / Invalid src prop (이미지주소~) on `next/image`, hostname "호스트명~" is not configured under images in your `next.config.js`

문제 상황

유저의 썸네일이 supabase stoage에 저장되어 있는데, 불러오려니 에러가 발생했다.

 

Error: Invalid src prop (https://lukvbpxaabobwpzkacow.supabase.co/storage/v1/object/public/userThumbnail/screen.png?t=2024-04-02T10%3A26%3A52.780Z) on `next/image`, hostname "lukvbpxaabobwpzkacow.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.config.mjs 파일에서 아래 내용을 추가하여 이미지 외부 주소에 대해서 설정한다.

const nextConfig = {
  images: {
    remotePatterns: [
      { 
        protocol: "https", 
        hostname: "호스트명~",
        pathname: "/storage/v1/object/public/**"
      }
    ]
  }
};

 

 

hostname에 이미지 주소에서 호스트 부분을 넣는다. 어렵다면 에러에서 준걸 넣으면 되고, 예를 들어 네이버라면 naver.com 부분이 되겠다.

 

pathname 은 호스트 부분 뒤의 / 로 시작하는 부분이다. 이것도 에러가 준걸 그대로 넣어도 되지만, 조금이라도 다르면 또 설정을 추가해야 하기 때문에 달라질 수 있는 가능성이 있다면 ** 을 넣어서 public 경로 이후는 자유롭게 변경 가능하도록 만들어 줄 수 있다.

 

결과

제일 윗부분에 이미지가 불러와진 걸 볼 수 있다.

 

느낀 점

에러에 답이 있다. 이번에는 진짜 에러에 답이 있었다. 

 

 

참고

https://nextjs.org/docs/messages/next-image-unconfigured-host