NextJS는 어떻게 이미지를 최적화할까?

function getSupportedMimeType(options: string[], accept = ''): string {
  const mimeType = mediaType(accept, options)
  return accept.includes(mimeType) ? mimeType : ''
}

const mimeType = getSupportedMimeType(formats || [], req.headers['accept'])ts

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    formats: ['image/avif', 'image/webp'], 
  },
}

export default nextConfigjs

// ANIMATABLE_TYPES = [WEBP, PNG, GIF]
if (ANIMATABLE_TYPES.includes(upstreamType) && isAnimated(upstreamBuffer)) {
  Log.warnOnce(
    `The requested resource "${href}" is an animated image so it will not be optimized. Consider adding the "unoptimized" property to the <Image>.`
  )
  return {
    buffer: upstreamBuffer,
    contentType: upstreamType,
    maxAge,
  }
}ts

if (
  upstreamType.startsWith('image/svg') &&
  !nextConfig.images.dangerouslyAllowSVG
) {
  Log.error(
    `The requested resource "${href}" has type "${upstreamType}" but dangerouslyAllowSVG is disabled`
  )
  throw new ImageError(
    400,
    '"url" parameter is valid but image type is not allowed'
  )
}

// VECTOR_TYPES = [SVG]
if (VECTOR_TYPES.includes(upstreamType)) {
  return {
    buffer: upstreamBuffer,
    contentType: upstreamType,
    maxAge,
  }
}ts

const nextConfig = {
  images: {
    formats: ['image/avif', 'image/webp'],
    dangerouslyAllowSVG: true, 
    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;", 
  },
}js

import Image from 'next/image'
import testImage from '../public/test.png'

export default function Page() {
  return (
    <>
      <img src={testImage.src} alt="테스트 이미지" />
      <Image src={testImage} alt="테스트 이미지" />
    </>
  )
}tsx

<!-- img 태그: 원본 이미지 경로 -->
<img src="/_next/static/media/test.5a33257e.png" alt="테스트 이미지" />
<!-- Image 컴포넌트: 최적화를 위한 URL로 변환 -->
<img
  alt="테스트 이미지"
  loading="lazy"
  width="1048"
  height="743"
  decoding="async"
  data-nimg="1"
  style="color:transparent"
  srcset="
    /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.5a33257e.png&amp;w=1080&amp;q=75 1x,
    /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.5a33257e.png&amp;w=3840&amp;q=75 2x
  "
  src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.5a33257e.png&amp;w=3840&amp;q=75"
/>html

const nextConfig = {
  images: {
    minimumCacheTTL: 60, // 캐시 유효 기간을 60초로 설정 
  },
}js

import testImage from '../public/test.png'

export default function Page() {
  return (
    <Image
      src={testImage}
      placeholder="blur"
      alt="테스트 이미지"
    />
  )
}jsx

{
  src: '/_next/static/media/test.5a33257e.png',
  height: 743,
  width: 1048,
  blurDataURL: '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.5a33257e.png&w=8&q=70',
  blurWidth: 8,
  blurHeight: 6
}js

<Image
  src="/images/test.png"
  width={500}
  height={300}
  placeholder="blur"
  alt="테스트 이미지"
/>jsx

let showSharpMissingWarning = process.env.NODE_ENV === 'production'

if (sharp) {
  // sharp 패키지가 있으면 sharp로 최적화
  const transformer = sharp(buffer, {
    sequentialRead: true,
  })
  // ...
} else {
  // production 모드이고 output: "standalone" 이면 Sharp 패키지 필수
  if (showSharpMissingWarning && nextConfigOutput === 'standalone') {
    Log.error(
      `Error: 'sharp' is required to be installed in standalone mode for the image optimization to function correctly. Read more at: https://nextjs.org/docs/messages/sharp-missing-in-production`
    )
    throw new ImageError(500, 'Internal Server Error')
  }

  // production 모드에서 Sharp 패키지 권장
  if (showSharpMissingWarning) {
    Log.warnOnce(
      `For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'npm i sharp', and Next.js will use it automatically for Image Optimization.\n` +
        'Read more: https://nextjs.org/docs/messages/sharp-missing-in-production'
    )
    showSharpMissingWarning = false
  }

  // Squoosh 변환 로직
  const orientation = await getOrientation(buffer)
  const { processBuffer } =
    require('./lib/squoosh/main') as typeof import('./lib/squoosh/main')
  // ...
}tsx