[공식문서] NextJS - Assets, Metadata, and CSS #3

Assets(자산)

Next.js는 이미지와 같은 정적 에셋을 최상위 public 디렉터리 아래에서 제공할 수 있습니다. public 내부의 파일은 페이지와 유사하게 애플리케이션의 루트에서 참조될 수 있습니다.

 

public 디렉터리는 robots.txt, Google 사이트 인증 및 기타 정적 에셋에도 유용합니다. 정적 파일 제공에 대한 자세한 내용은 정적 파일 제공 문서를 확인하세요.

 

프로필 사진 다운로드

먼저 ,프로필 사진을 가져오겠습니다.

 

• 프로필 사진을 .jpg 형식으로 다운로드하세요(또는 이 파일을 사용하세요).
• public 디렉터리 안에 images 디렉터리를 생성하세요.
• 사진을 public/images 디렉터리에 profile.jpg로 저장하세요.
• 이미지 크기는 약 400px x 400px 정도로 설정하세요.
• 사용하지 않는 SVG 로고 파일은 public 디렉터리 바로 아래에서 삭제해도 됩니다.

최적화되지 않은 이미지

일반 HTML에서는 프로필 사진을 다음과 같이 추가합니다:

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

 

하지만 이렇게 하면 다음과 같은 작업을 수동으로 처리해야 합니다:

• 다양한 화면 크기에 대한 응답성 있는 이미지 처리
• 제3자 도구나 라이브러리를 사용한 이미지 최적화
• 이미지를 뷰포트에 진입할 때만 로드

등등. 대신, Next.js는 이미지 컴포넌트를 제공하여 이러한 작업을 자동으로 처리합니다.

 

Image 컴포넌트와 이미지 최적화

next/image는 HTML <img> 요소의 확장으로, 현대 웹에 맞게 발전시킨 것입니다.

 

Next.js는 이미지 최적화도 기본적으로 지원합니다. 이를 통해 브라우저가 지원하는 경우 WebP와 같은 현대적인 형식으로 이미지의 크기를 조정, 최적화 및 제공할 수 있습니다. 이로써 작은 뷰포트를 가진 기기에 대해 큰 이미지를 전송하지 않게 됩니다. 또한 Next.js는 미래 이미지 형식을 자동으로 채택하고 해당 형식을 지원하는 브라우저에 제공할 수 있습니다.

 

자동 이미지 최적화는 모든 이미지 소스에서 작동합니다. 이미지가 CMS와 같은 외부 데이터 소스에서 호스팅되는 경우에도 최적화될 수 있습니다.

 

Image 컴포넌트 사용

Next.js는 이미지를 빌드 시간에 최적화하는 대신 사용자가 이미지를 요청할 때마다 이미지를 필요에 따라 최적화합니다. 정적 사이트 생성기와 정적 전용 솔루션과 달리, 10개의 이미지든 10백만 개의 이미지든 빌드 시간이 증가하지 않습니다.

 

이미지는 기본적으로 게으르게 로드됩니다. 이는 뷰포트 외부의 이미지로 인해 페이지 속도가 벌어지지 않음을 의미합니다. 이미지는 뷰포트에 스크롤되면 로드됩니다.

 

이미지는 항상 Cumulative Layout Shift를 피하다록 렌더링 됩니다. 이는 Google이 검색 순위에 사용할 Core Web Vital 중 하나입니다.

 

다음은 next/image를 사용하여 프로필 사진을 표시하는 예입니다. height 및 width 속성은 소스 이미지와 동일한 종횡비를 가진 원하는 렌더링 크기여야 합니다.

 

참고 : "Polishing Layout(레이아웃 다듬기)"에서 이 컴포넌트를 나중에 사용할 예정이므로 지금은 복사할 필요가 없습니다.

 

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"
  />
);

 

자동 이미지 최적화에 대해 더 알아보려면 문서를 확인하세요.

Image 컴포넌트에 대해 자세히 알아보려면 next/image의 API 참조 문서를 확인하세요.