Next의 <Image> 사용하기

Next에서 정적 파일 불러오는 방법

Next.js는 'public' 디렉토리에 여러가지 정적 파일을 보관하고
<Image> 태그를 사용하여 꺼내올 수 있다.

public 폴더 내부에 이미지 파일(예: jpeg 파일)을 넣어주고

import Image from "next/image";

export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <Image src="/ye.jpeg" alt="ye" width="64" height="64" />
    </>
  );
}

정적 파일 사용시 주의점

1. public 폴더에 저장된 파일의 이름과 pages 폴더에 저장된 파일의 이름에서 한쪽의 확장자를 생략하거나 두 파일의 이름이 같으면 안 됨

• Next가 두 파일을 구분하지 못함

예: public/hello, pages/hello.js - 확장자가 구분이 안 되므로 같은 파일로 취급되어 오류 발생
=> public/hello.txt, pages/hello.js 로 변경해야 오류가 발생하지 않음

2. 빌드 시에 public폴더에 있는 파일만 Next가 인식 가능

• 브라우저에서 사용되는 정적 파일(웹 파일)들은 위의 방법으로 불러올 수 없음

<Image>의 장점

일반 HTML의 img 태그를 사용하면 다음 내용을 수동으로 처리해야 한다.

• 다양한 화면 크기에서 이미지가 반응하는지 확인
• 타사 도구 또는 라이브러리로 이미지 최적화
• 화면에 표시될때만 ( 뷰포트에 들어갈 때만 ) 이미지 로드

=> Next.js의 <Image>태그를 사용하면, 이를 자동으로 해결할 수 있다.

<Image> 태그의 특징

1. 이미지 최적화 (이미지 크기 자동 조절 )

최신 형식의 이미지 크기 변경 기능(Webp 등)을 사용 가능 (브라우저에서 지원하는 경우)

자동 이미지 변경은 모든 이미지 소스에서 작동하고,
이미지를 CMS와 같은 외부 데이터 소스에서 불러오는(호스팅) 경우에도 최적화 가능

2. 이미지 최적화 (시간 단축)

Next.js는 빌드 시에 이미지를 최적화하지 않고, 사용자가 요청할 때만 이미지를 최적화한다.

따라서 정적 사이트와는 달리, 10개의 이미지를 전송하든 1천만 개의 이미지를 전송하든 빌드 시간이 증가하지 않음

• 이미지는 기본적으로 지연 로드됨 (=> 화면에 표시될 이미지만 로드)
  즉, 뷰포트 외부의 이미지에 대해서는 페이지 속도에 영향을 미치지 않는다.

이미지는 레이아웃 오류를 방지하여 렌더링됨
=> 사용자가 예상치 못하게, 레이아웃이 움직여 잘못된 행동을 하게 되는 것을 방지

출처: https://defineall.tistory.com/1038