next/image에서 모든 이미지 도메인 허용하기

🚀 next/image에서 모든 이미지 도메인 허용하기

Next.js의 next/image는 보안 및 최적화를 위해 외부 이미지 도메인을 명시적으로 지정해야 합니다.
"Un-configured Host" 오류는 허용되지 않은 도메인의 이미지를 불러오려고 할 때 발생합니다.

---

1️⃣ 모든 도메인 허용 (next.config.js)

Next.js에서는 images.domains 옵션을 설정해야 하지만, 특정 도메인을 모를 경우 와일드카드(* 사용)는 불가능합니다. 대신, remotePatterns 옵션을 사용하여 모든 도메인을 허용할 수 있습니다.

📌 next.config.js 설정 (모든 도메인 허용)

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https", // 모든 HTTPS 도메인 허용
        hostname: "**",
      },
      {
        protocol: "http", // 모든 HTTP 도메인 허용 (보안 주의)
        hostname: "**",
      },
    ],
  },
};

module.exports = nextConfig;

✅ 위 설정은

• https://example.com/image.jpg
• http://cdn.some-site.com/photo.png
• https://assets.website.net/picture.jpeg
• 모든 도메인의 이미지를 허용합니다.

🚨 보안 주의:

• remotePatterns를 http까지 허용하면 보안 리스크가 생길 수 있으므로 HTTPS만 허용하는 것이 좋습니다.
• 특정 호스트만 허용하려면 hostname: "**" 대신 허용할 도메인만 추가하세요.

---

2️⃣ 특정 도메인만 허용 (next.config.js)

만약 모든 도메인을 허용하는 것이 보안상 부담된다면, 특정 도메인만 허용할 수도 있습니다.

const nextConfig = {
  images: {
    domains: [
      "images.unsplash.com",
      "cdn.example.com",
      "assets.website.net",
    ],
  },
};

module.exports = nextConfig;

✅ 위 설정은

• https://images.unsplash.com/image.jpg
• https://cdn.example.com/photo.png
• https://assets.website.net/picture.jpeg
• 이 세 도메인에서만 이미지를 허용합니다.

---

3️⃣ 서버 재시작 필수

설정을 변경한 후에는 Next.js 서버를 다시 시작해야 합니다.

npm run dev  # 또는 yarn dev

또는 Next.js를 배포했다면 Vercel, Netlify 등의 빌드를 다시 실행해야 합니다.

---

🎯 최종 정리

✅ 모든 이미지 도메인을 허용하려면

images: {
  remotePatterns: [
    { protocol: "https", hostname: "**" },
    { protocol: "http", hostname: "**" },
  ],
},

✅ 특정 도메인만 허용하려면

images: {
  domains: ["images.unsplash.com", "cdn.example.com"],
},

✅ 설정 후 반드시 Next.js 서버를 재시작해야 적용됨

🚀 이제 Next.js에서 "Un-configured Host" 오류 없이 모든 이미지를 불러올 수 있습니다! 🎉