Next Image 사용할 때 주의할 점

next/image 에러메세지

Error: Invalid src prop (https://images.unsplash.com/photo-1510337550647-e84f83e341ca?q=80&w=1631&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) on `next/image`, hostname "images.unsplash.com" is not configured under images in your `next.config.js`

 

해결방법

<Image /> 태그를 이용해서 next/image 기능을 사용할 때, 주의할 점이 있다.

만약 이미지를 프로젝트 안에 저장하는 것이 아니고 인터넷에서 주소를 사용하여 내보내려면

next.config.js 파일에 도메인을 허용해 주어야 한다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['images.unsplash.com'],
  },
}

module.exports = nextConfig

 

nextConfig.images.domains에 해당 도메인을 적어주면 에러를 해결할 수 있다.

 

궁금해서 도메인 허용 따로 없이 img 태그를 이용했을 때는 잘 뜨는 것을 볼 수 있다.

그치만 next/image의 편리한 Image 컴포넌트를 사용하기 위해서는 설정해 주는 것이 좋을 것 같다.