[Next.js] Image Tag Error: Invalid src prop

에러 발생

기존에는 로컬 이미지만 next/Image를 사용하고 있다가 리모트, 서버상에서 받아오는 값에도 적용을 시켜야 해서 아 그냥 하면 되겠다 싶었다. 하지만..?

아래와 같은 에러가 발생했다..

심란스러웠다.. 빠르게 구글링을 통해서 무슨 에러인지 찾았다.

 

해결책

해당 에러는 Next.js의 Image태그를 사용해서 외부의 이미지를 불러올 경우 해당 이미지에 대해 보호하려고 발생하는 오류로 확인되었다.

이 에러를 해결하기 위해선 우리의 next.config.js에 아래와 같은 코드를 입력한다.

module.exports = {
	images: {
		domains: ['firebasestorage.googleapis.com'],
	},
};

images 하위의 domains에 [] 안에  에러 문자의 hostname 다음의 문자열을 작성해주면 된다.

나는 firebase의 storage를 사용하여 []안에 해당 값을 넣어주었다.

 

⚠️ 위와 같이 작성했음에도 안될 경우는 프론트 node 서버를 껐다 켜야 한다.

서버와 관련된 정보를 수정하였으니까 서버를 껐다 켜주면 해당 오류는 해결됐을 것이다.