[Next.js] Images Configuration

images.domains 🆚 images.remotePatterns

☑️ images.domains (이전 방식)

images: {
	domains: ['example.com'],
}

• Next.js 12 이하에서 원격 이미지를 사용할 때 사용
• 단순히 도메인만 지정하면 해당 도메인의 모든 경로의 이미지를 사용할 수 있다.
• Next.js 14부터 사용되지 않는다.

✅ images.remotePatterns (새로운 방식)

images: {
  remotePatterns: [
    {
      protocol: 'https',
      hostname: 'example.com',
      port: '', // 기본 포트 사용 시 빈 문자열
      pathname: '/**', // 모든 경로 허용
    },
  ],
}

• Next.js 13부터 권장되는 방식
• 단순히 도메인만 허용하는 게 아니라, protocol, hostname, port, pathname까지 세밀하게 설정 가능하다.
• 더 안전하고, 더 정밀한 접근 제어가 가능하다.
• pathname: '/**' : 도메인의 모든 경로의 이미지 허용
• pathname: '/images/**' : /images로 시작하는 경로만 허용

🍀 정리

항목	images.domains	images.remotePatterns
지원 버전	Next.js 12 이하	Next.js 13 이상
상태	Deprecated	권장
설정 방식	도메인만 설정	프로토콜, 호스트, 포트, 경로까지 상세 설정
보안	낮음	높음