Next.js 9-1. Image-Component and Image Optimiztion

  Next.js는 이미지 최적화에 대한 많은 기능을 제공한다. Next.js에서 이미지를 사용하면 다음과 같은 이점이 있다.

1. 더 빠른 페이지 로딩 속도	이미지 최적화를 통해 페이지 로딩 속도를 높일 수 있다.
2. SEO 최적화	이미지 최적화를 통해 이미지의 alt 텍스트를 자동으로 생성할 수 있다.
3. 반응형 이미지 지원	Next.js Image Component를 사용하면 이미지를 자동으로 조정하여 모바일 기기와 데스크탑 기기에 모두 적합한 이미지를 제공할 수 있다.

 

 

• 이미지 컴포넌트 사용하기

  Next.js의 Image Component는 이미지 최적화에 대한 모든 작업을 처리한다. Image Component를 사용하기 위해서는 다음과 같이 코드를 작성한다.

import Image from 'next/image'

function MyComponent() {
  return (
    <div>
      <Image
        src="/images/my-image.jpg"
        alt="My image"
        width={500}
        height={500}
      />
    </div>
  )
}

export default MyComponent

 

 

• Local Images

  로컬 이미지는 .jpg, .png 또는 .webp 파일을 import 하여 사용할 수 있다.

import profilePic from '../assets/me.png'

  동적인 await import() 나 require()은 지원하지 않는다. import는 빌드 시간에 분석할 수 있도록 정적이어야 한다. Next.js는 가져온 파일을 기반으로 이미지의 width 및 height를 자동으로 결정한다. 이 값은 이미지를 로드하는 동안 누적 레이아웃 이동을 방지하는 데 사용된다.

import Image from 'next/image'
import profilePic from '../assets/me.png'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src={profilePic}
        alt="Picture of the author"
        // width={500} automatically provided
        // height={500} automatically provided
        // blurDataURL="data:..." automatically provided
        // placeholder="blur" // Optional blur-up while loading
      />
    </>
  )
}

 

 

• Remote Images

  remote image를 사용하기 위해서는 src 속성이 상대 또는 절대일 수 있는 URL 문자열이어야 한다. 그리고 Next.js는 빌드 프로세스 중에 원격 파일에 액세스 할 수 없기 때문에 width, height와 선택적 blurDataURL props를 수동으로 제공해야 한다.

import Image from 'next/image'

export default function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src="/me.png"
        alt="Picture of the author"
        width={500}
        height={500}
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

  때때로 remote Image를 최적화하고 싶을 수 있다. 그때도 기본적으로 제공되는 Next.js 이미지 최적화 API를 사용하면 된다. 일단 loader 수준을 기본 설정을 그대로 두고 이미지 src props에 절대 경로 URL을 입력한다. 만약 악적인 사용자로부터 앱을 보호하려면 next/image 컴포넌트와 함께 사용할 원격 호스트 이름 목록을 정의해야 한다.

 

 

• Loader

  앞의 예에서 remote Image에 대한 부분 URL("/me.png")가 제공되었는데, 이것은 Loader 아키텍처로 인해 가능했다. 로더는 이미지의 URL을 생성하는 기능이다. 제공된 src를 수정하고 여러 URL을 생성하여 다양한 크기의 이미지를 요청한다. 이러한 여러 URL은 자동 srcset 생성에 사용되므로 사이트 방문자에게 뷰포트에 적합한 크기의 이미지가 제공된다.

  Next.js 앱의 기본 로더는 웹의 모든 위치에서 이미지를 최적화한 다음 Next.js 웹 서버에서 직접 제공하는 내장 이미지 최적화 API를 사용한다. CDN 또는 이미지 서버에서 직접 이미지를 제공하려는 경우 몇 줄의 JS로 고유한 로더 함수를 작성할 수 있다.

  loader props를 통해 이미지별로 로더를 정의하거나 loaderFile을 구성하여 앱 수준에서 정의할 수 있다.