[Docs] 정적 파일 사용하기

Next.js에서는 최상위public 디렉토리에 있는 정적 에셋(static assets)을 사용할 수 있다.

pages처럼 root에서 참조할 수 있다. public에 me.png를 추가하면, 다음과 같이 이미지에 액세스할 수 있다:

import Image from 'next/image'
 
export function Avatar() {
  return <Image src="/me.png" alt="me" width="64" height="64" />
}

 

디렉터리 이름은 꼭 public이어야 하며 변경할 수 없다. 이곳이 정적 에셋을 제공하는 데 사용되는 유일한 디렉토리다.
그리고 빌드 시점에서 디렉토리 내에 있는 에셋만 제공된다. 런타임 시 추가된 파일은 사용할 수 없다.

영구 파일 저장이 필요하다면 AWS S3와 같은 타사 서비스를 사용하는 것이 좋다.

 

 

이미지 추가하기(일반적인 경우)

HTML tag를 사용한다면 다음과 같이 프로필 사진을 추가한다.

<img src="/images/profile.jpg" alt="Your Name" />

 

하지만 이렇게하면 하기 세가지를 수동으로 처리해줘야 한다.

• 반응형 이미지로 다양한 크기의 화면에 대응하기 
• third-party 툴 이나 라이브러리로 이미지 최적화하기
• 이미지를 뷰포트 내에 진입했을 때만 로드하기

 

 

Image 컴포넌트 사용하기

Next.js에는 위 세가지 작업을 처리해주는 기능이 기본 제공된다.

Image 컴포넌트. 최신 웹에 맞게 발전된 HTML <img> 요소의 확장형이다.

 

기본적으로 이미지 최적화를 지원한다.

예를 들면 브라우저가 WebP와 같은 최신 형식을 지원하면 이미지 크기를 조정하고 최적화해서 제공할 수 있다.

뷰포트가 작은 기기에 큰 이미지를 전송하지 않아도 된다.

CMS와 같은 외부 데이터 소스에서 호스팅되는 경우를 비롯해 모든 이미지 소스에서 자동 최적화가 작동한다.

 

그리고 빌드 시점에 이미지를 최적화하는 대신, 사용자 요청시점에 온디맨드 방식으로 이미지를 최적화한다.

10개의 이미지를 제공하든 천만 개의 이미지를 제공하든 빌드 시간이 늘어나지 않는다.

정적 사이트 생성기나 정적 전용 솔루션과는 다르다.

이미지는 기본적으로 지연 로드(lazy load)된다.

뷰포트 외부의 이미지로 인해 페이지 속도가 저하되지 않는다는 이야기다.

이미지는 뷰포트에 스크롤이 접근했을 때 로드된다.

 

이미지는 항상 Cumulative Layout Shift(CLS)를 피하는 방식으로 렌더링 된다. 

CLS는 Google의 웹페이지 성능 측정 지표로, 사용자가 예상치 못한 레이아웃 이동을 경험하는 빈도를 수량화한 메트릭이다.

 

다음은 next/image를 사용하여 프로필 사진을 표시하는 예시.

import Image from 'next/image';

const YourComponent = () => (
  <Image
    src="/images/profile.jpg" // Route of the image file
    height={144} // Desired size with correct aspect ratio
    width={144} // Desired size with correct aspect ratio
    alt="Your Name"
  />
);

 

Quick Review: What does next/image simplify for you? Resizing & optimizing images