Next.js | 이미지 최적화, 외부 URL 이미지 허용

이미지 최적화

• Next.js 에서 next/image 사용 시 gif, svg 를 제외한 이미지에 대해 자동으로 최적화가 진행됨
• svg 의 경우 보안 이슈로 인해 따로 설정을 해줘야 최적화 가능
• 추가 최적화가 필요한 경우 sharp 라이브러리 사용 권장

svg 최적화

SVG 이미지는 벡터 기반으로 확대나 축소가 자유롭지만,
XSS 공격과 같은 보안 문제를 야기할 수 있습니다.
dangerouslyAllowSVG는 SVG 파일을 최적화 과정에 포함시킬지 결정하는 설정입니다.
이 설정을 활성화하면, Next.js는 SVG 이미지에 대한 최적화를 시도하지만, 이때 추가적인 보안 조치를 취하는 것이 좋습니다.

// next.config.js
module.exports = {
  images: {
    dangerouslyAllowSVG: true,
    contentDispositionType: 'attachment',
    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
  },
}

브라우저가 이미지를 다운로드하도록 contentDispositionType을 강제로 설정하고, 이미지에 포함된 스크립트 실행을 방지하기 위해 contentSecurityPolicy를 설정하는 것이 강력하게 권장됩니다.

외부 URL 허용

외부 이미지 url 을 사용하면 이미지 최적화를 사용할 수 없어
기본적으로 외부 이미지 url을 허용하지 않는다

• 특정 외부 도메인에만 허용하고 싶다면 domains 속성을 설정
• 모든 외부 도메인에 허용하고 싶다면 remotePatterns 속성을 설정

domains 옵션도 외부의 이미지를 사용할 수 있도록 외부 도메인을 설정할 수 있는데, remotePatterns 옵션과 다르게 와일드 카드를 통한 서브 도메인을 지원하지 않고,
프로토콜, 경로 이름, 포트 번호 등을 타이트하게 제한하는 것이 불가능하기 때문에 remotePatterns 옵션을 사용하는 것을 권장

const nextConfig = {
  images: {
  	domains: ['xxx.xxx.com'],
    remotePatterns: [
      {
        protocol: 'http',
        hostname: '**',
      },
      {
        protocol: 'https',
        hostname: '**',
      },
    ],
  },
};

이미지 크기가 크면 웹사이트 로딩 속도가 느려질 수 있다
외부 이미지 서버가 다운되면 이미지가 표시되지 않을 수 있다
외부 이미지 서버가 악의적인 콘텐츠를 제공할 수 있다