[NextJS] Error: Invalid src prop

nextJS 의 Image 태그를 이용해서 외부의 이미지 링크를 로드해오는 과정에서 에러가 발생

...
 <Image
  width={20}
  height={20}
  src={person.avatar}
  alt=""
  className="flex-shrink-0 rounded-full"
 />
...

에러메세지를 읽어보니 이미지를 불러오는데 hostname 이 next.config.js 에 설정되어 있지않다고 해서 next.config.js 파일에 도메인 링크를 추가했더니 해결되었다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  ...
  images: {
    domains: ["images.unsplash.com"], << 배열에 도메인 링크 추가
  },
};

module.exports = nextConfig;

깔끔 - !
설정을 변경해준 것이기 때문에 서버를 껐다 켜주어야 적용이 된다💡