【Next.js】 Next.js11부터 이미지 컴포넌트의 width와 height의 지정이 불필요하게

소개

요 전날 2021/6/16에 Next.js 11이 발표되었습니다.

Next.js 11

이번 업데이트에서는 몇 가지 기능 개선이 이루어지고 있습니다만, 그 중에서도 제가 기뻤던 개선을 하나 전하고 싶습니다.

이미지 구성 요소의 width 및 height 지정이 더 이상 필요하지 않습니다.

Before

Next.js의 이미지 구성 요소는 width 및 height 지정이 필요했습니다.
이 때문에 미리 화상의 종횡의 값을 확인해야 하고, 표시하는 화상의 수가 늘어나면, 나름대로 수고가 걸려 있었습니다.

구체적으로는, 다음과 같은 코드로, 이미지의 width 와 height 를 지정할 필요가 있었습니다.

import Image from 'next/image'

function Home() {
  return (
    <>
      <Image
        src='/vercel.svg'
        alt='logo'
        width={588}
        height={136}
      />
    </>
  )
}

After

이것이 이번 Next.js 11 업데이트로 인해 width 와 height 의 지정이 불필요하게 되었습니다.

코드는 다음과 같습니다.

import Image from 'next/image'
import logo from '../public/vercel.svg'

export default function Home() {
  return (
    <>
      <Image src={logo} alt='logo' />
    </>
  )
}

위의 이미지는 코드 실행 결과입니다.width 와 height 를 지정하지 않아도 종횡비가 유지되고 있는 것을 확인할 수 있습니다.
이제 이미지를 미리 열고 가로/세로 값을 확인할 필요가 없습니다.

단지 이미지의 로드는 import 로 할 필요가 있습니다.
직접 import 로 이미지를 지정하면 width 와 height 가 자동으로 이미지 컴포넌트에 제공되기 때문입니다.

만약 아래와 같은 코드로 import 를 사용하지 않고 이미지를 지정하면, Unhandled Runtime Error

import Image from 'next/image'

export default function Home() {
  return (
    <>
      <Image src="/vercel.svg" alt="logo" />
    </>
  )
}

사이고에게

이미지 컴포넌트의 기능 개선은 나를 위해 수수하지만 기쁜 업데이트였습니다.

오늘 현재 새로 Next.js 프로젝트를 만들면 새 버전인 Next.js 11이 설치됩니다.
이번에 소개한 이미지 컴포넌트의 기능도 시도할 수 있습니다.

꼭 여러분의 환경에서 새로운 Next.js 11을 사용해보십시오.

참고

next-11#automatic-size-detection-local-images