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;
깔끔 - !
설정을 변경해준 것이기 때문에 서버를 껐다 켜주어야 적용이 된다💡