소개

이 블로그는 Next.js의 기본 제공 이미지 구성 요소를 기본적으로 지원하며 제공된 이미지 구성 요소를 사용하기 위해 markdown 또는 mdx 문서의 기본 이미지 태그를 자동으로 교체합니다.

사용법

새 페이지 경로 / 자바 스크립트 파일에서 사용하려면 이미지 구성 요소를 가져 와서 호출 해야합니다.

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

마크다운 파일의 경우 기본 이미지 태그를 사용할 수 있으며 기본 'img' 태그는 빌드 프로세스에서 'Image' 구성 요소로 대체됩니다.

'static/images/ocean.jpg'에 'ocean.jpg'라는 파일이 있다고 가정하면 다음 코드 줄은 최적화된 이미지를 생성합니다.

![ocean](/static/images/ocean.jpg)

또는 mdx를 사용하고 있으므로 이미지 구성 요소를 직접 사용할 수 있습니다! 고정 너비와 높이를 제공해야 합니다. 'img' 태그 메서드는 차원을 자동으로 구문 분석합니다.

<Image alt="ocean" src="/static/images/ocean.jpg" width={256} height={128} />

참고 : 이미지를 저장하려고 하면 브라우저에서 지원하는 경우 webp 형식입니다!

ocean

Photo by YUCAR FotoGrafik on Unsplash

사용시 혜택

Webp로 더 작은 이미지 크기(jpeg보다 ~30% 작음)
반응형 이미지로 사용자의 표시 영역에 따라 올바른 이미지 크기가 제공됩니다.
지연 로딩 이미지가 뷰포트로 스크롤될 때 로드됩니다.
누적 레이아웃 이동을 방지합니다.
빌드 시간 대신 주문형 최적화되어 있어 빌드 시간에 증가가 없습니다.

한계

'next/image'에 의존하기 때문에 Cloudinary나 Imgix와 같은 외부 이미지 CDN을 사용하지 않는 한 호스팅을 위해 Vercel을 사용해야 합니다. 이는 구성 요소가 고도로 최적화된 이미지 CDN을 호출하는 서버리스 함수처럼 작동하기 때문입니다.
Vercel에 묶이고 싶지 않다면 'lib/mdx.js'의 'remarkPlugins'에서 'imgToJsx'를 제거할 수 있습니다. 이렇게 하면 기본 'img' 태그를 대체하는 것을 피할 수 있습니다.
또는 빌드 시 이미지 최적화가 지원될 때까지 기다릴 수 있습니다. 다른 라이브러리, next-optimized-images 여기서는 수행하지 않는 webpack을 통해 이미지를 변환해야 하지만 그렇게 합니다.
외부 링크의 이미지는 'next/image'를 통해 전달되지 않습니다.
모든 이미지는 'public' 폴더(예: '/static/images/ocean.jpeg')에 저장해야 합니다.