[Nextjs] 외부 이미지(URL)를 가져오기 위한 설정 (next.config.js, images)

안녕하세요

오늘도 삽질중인 달망이 입니다.

 

 

 

 

nextjs에서는 서버가 있는 base url이 아닌

다른 도메인의 url에 접속하려면 간단한 설정이 필요합니다.

 

특히 서버에 있는 URL을 보여줄때 쓰곤합니다.

 

 

 

next.config.js 파일내에 아래와 같이 다른 도메인 주소를 추가합니다.

const nextConfig = {
  images: {
    domains: [
    	"a.domain.com",
      	"b.domain.com",
      	"c.domain.com",
      	// ...
    ]
  }
}

module.exports = nextConfig;

 

 

 

앞쪽만 다른 도메인을 추가하면 너무 힘드니 

패턴으로 간편하게 여러 도메인주소를 추가해도 됩니다.

const nextConfig = {
  images: {
    remotePatterns: [
      { protocol: "https", hostname: "**.domain.com" }
    ]
  }
}