next.config.js domains 설정

next js를 사용하시는 분들 중 회사 cdn이나 외부 cdn에서 무작위 이미지를 가져와야하는 상황이 존재합니다.

이때 가져온 이미지를 Image 컴포넌트를 사용해 이미지 최적화 기능을 사용할 때 문제가 발생합니다.

설정되지 않은 외부 도메인의 컨텐츠를 get 해서 적용하는건 next 웹앱이 허용하지않습니다.

이유는 만약 외부 컨텐츠를 무작위로 허용했다간 SSRF(Server-Side Request Forgery)가 발생하기 때문에 이를 방지 하기위해 외부 도메인을 화이트리스트화 해서 허용해주는겁니다.

이는 next.config.js에서 특정 도메인을 화이트리스트에 올려두면 잘 불러와집니다.

module.exports = {
images: {
loader: 'default', // 이미지 로더 부분은 생략 가능.
domains: [
'cdn1.example.com', // 허용할 외부 이미지 도메인
'cdn2.example.com',
'images.partner.com',
],
},
}