Image Optimization

nextjs.org/docs/basic-features/image-optimization

Basic Features: Image Optimization | Next.js

nextjs.org/docs/api-reference/next/image#related

 

10버전부터 Next.js에서는 Image 컴포넌트를 통해 이미지 최적화를 진행할 수 있게 되었습니다. html의 img 태그의 extension이며 사용자가 요청시에 최적화를 진행하기 때문에 빌드 타임이 증가하지 않습니다.

 

뷰포트에 잡히지 않는 이미지는 로드하지 않고 이후 레이지 로드함으로서 초기 웹 로딩 시간을 단축시킬 수 있습니다.

 

next/image를 사용하는 방법은 단순합니다.

이 외에 loading, quality 등 유용한 속성들이 존재하니 공식 문서에서 확인해볼 수 있습니다.

아래 예시에서는 안 나와 있는데, layout, objectFit, quality 속성은 항상 많이들 사용하는 편입니다.

 

nextjs.org/docs/api-reference/next/image#sizes

import Image from 'next/image'

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>
    </>
  )
}

export default Home

 

next.config.js for image optimization

 

public 폴더에 있는 내부 이미지는 next/image를 사용하면 최적화됩니다. 그러나 외부 이미지를 최적화하기 위해서는 next.config.js 에서 domain property를 설정해야 합니다. 어뷰징을 막기 위한 방법이라고 하네요.

External domains must be configured in next.config.js using the domains property.

 

module.exports = {
  images: {
    domains: ['example.com'],
  },
}

 

예를 들어 아래처럼 외부 링크를 이용한다면

<Image
  alt="Next.js logo"
  src="https://assets.vercel.com/image/upload/v1538361091/repositories/next-js/next-js-bg.png"
  width={1200}
  height={400}
/>

next.config.js는 아래처럼 구성해줄 수 있습니다.

module.exports = {
  images: {
    domains: ['assets.vercel.com'],
  },
}

 

만약 넣지 않으면

Image 태그 내부에 외부 이미지를 사용하면서 위와 같은 구성을 해주지 않으면 아래 오류가 발생하빈다.

Invalid src prop (https://cienps.s3.ap-northeast-2.amazonaws.com/... 주소) on `next/image`, hostname "cienps.s3.ap-northeast-2.amazonaws.com" is not configured under images in your `next.config.js` See more info: https://err.sh/next.js/next-image-unconfigured-host

 

뭘 넣으라고 친절하게 경고해주니 넣으면 됩니다.