소개

tailwind 스타터 블로그는 Next.js의 내장 이미지 컴포넌트를 기본적으로 지원하며, 마크다운이나 MDX 문서의 기본 이미지 태그를 자동으로 제공된 Image 컴포넌트로 교체합니다.

사용법

새로운 페이지 라우트나 자바스크립트 파일에서 사용하려면, 간단히 이미지 컴포넌트를 import하고 호출하면 됩니다.

import Image from 'next/image'

function Home() {
  return (
    <>
      <h1>내 홈페이지</h1>
      <Image src="/me.png" alt="작성자 사진" width={500} height={500} />
      <p>홈페이지에 오신 것을 환영합니다!</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 형식으로 저장됩니다!

사진 제공: YUCAR FotoGrafik 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)

Next.js에서 이미지 사용하기

@지수블리

소개

사용법

장점

제한사항