Next.js 버전 14에서 도메인 설정을 remotePatterns로 변경하는 방법
Next.js의 새로운 버전 14에서 도메인 설정이 어떻게 변경되었는지에 대해 알아보겠습니다. 특히, 이미지 호스팅과 관련된 설정을 하시는 분들에게 유용한 정보가 될 것 같습니다.
Next.js 14에서의 주요 변경 사항
Next.js 버전 14에서는 기존의 domains 설정이 deprecated(더 이상 사용되지 않음)되고, 새로운 remotePatterns 설정으로 대체되었습니다. 이는 next.config.js 파일에서 설정할 수 있습니다. 이 변경으로 인해 이미지 호스팅 설정을 더 유연하고 간편하게 할 수 있게 되었습니다.
설정 변경하기
기존에 domains 설정을 사용하던 분들은 아래와 같은 형식으로 설정을 하고 있었을 것입니다:
// 기존 방식 (Next.js 13 이하)
const nextConfig = {
images: {
domains: ['res.cloudinary.com'],
},
}
하지만, Next.js 14에서는 다음과 같이 remotePatterns 설정을 사용해야 합니다.
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'res.cloudinary.com',
pathname: '**',
},
],
},
여기서 중요한 점은 hostname 값입니다. hostname 값에 와일드카드 '**'를 사용하는 대신, 실제 호스트명을 사용해야 합니다. 예를 들어, res.cloudinary.com와 같은 실제 호스트명을 설정해야 합니다. 만약 호스트명을 잘못 설정하면 "hostname 'res.cloudinary.com' is not configured"라는 오류가 발생할 수 있습니다.
이렇게 설정하면 Next.js 애플리케이션에서 Cloudinary에 호스팅된 이미지를 올바르게 로드할 수 있습니다.
결론
Next.js 14의 새로운 remotePatterns 설정으로 인해 이미지 호스팅 설정이 더 명확하고 유연해졌습니다. 도메인 설정을 올바르게 구성하여 이미지 로드 오류를 방지하세요. 설정을 변경할 때는 항상 실제 호스트명을 사용하는 것을 잊지 마세요!
이 포스트가 여러분의 Next.js 설정에 도움이 되었기를 바랍니다. 궁금한 점이나 추가적인 도움이 필요하시면 언제든지 댓글로 남겨주세요. 행복한 코딩 되세요! 🚀
