이미지 최적화

Next.js의 기본 이미지 로더는 CLI 어댑터가 자동으로 설정합니다. 이 경우 next.config에서 이미지 옵션을 설정하고 nitroship.json에 별도의 images 블록을 중복 지정하지 않습니다. 정적 사이트나 다른 프레임워크에서는 배포 루트의 nitroship.json에서 이미지를 활성화합니다.

{
  "images": {
    "protocol": "astro",
    "domains": ["images.example.com"],
    "remotePatterns": [
      {"protocol": "https", "hostname": "cdn.example.com", "pathname": "/**"}
    ]
  }
}

protocol은 필수이며 next, vercel, astro, ipx 중 하나를 선택합니다. 기본 경로는 각각 /_next/image, /_vercel/image, /_image, /_ipx이고 path로 변경할 수 있습니다. 원격 이미지는 domains 또는 remotePatterns로 명시적으로 허용합니다. localPatterns를 생략하면 로컬 이미지를 허용하고 빈 배열로 지정하면 모두 거부합니다.

astro는 /_image?href=/photo.png&w=640&f=webp 형식이고, Vercel 호환 로더는 /_vercel/image?url=/photo.png&w=640&q=75 형식입니다. ipx는 /_ipx/w_640,f_webp/photo.png 같은 경로를 사용합니다. 변환 설정이나 원본이 허용되지 않으면 400 응답을 반환합니다. SVG는 기본 비활성화되어 있으며 신뢰할 수 있는 원본에만 dangerouslyAllowSVG를 지정합니다. 사설 IP 원본을 허용하는 dangerouslyAllowLocalIP는 지원하지 않습니다.

최적화된 응답은 X-Nextjs-Cache: MISS|HIT|STALE을 제공하며 만료된 이미지가 있으면 이전 이미지를 제공하면서 재검증할 수 있습니다.