자산(Assets)
Next.js는 이미지와 같은 정적 자산을 최상위 public 디렉토리 아래에서 제공할 수 있습니다. public 안의 파일은 pages와 마찬가지로 애플리케이션의 루트에서 참조할 수 있습니다.
public 디렉토리는 robots.txt, Google 사이트 검증 및 기타 정적 자산에도 유용합니다. 자세한 내용은 정적 파일 서비스에 대한 문서를 참조하세요.
프로필 사진을 다운로드 받으세요(Download Your Profile Picture)
먼저, 프로필 사진을 가져오겠습니다.
.jpg형식으로 프로필 사진을 다운로드합니다 (또는 이 파일을 사용하세요).public디렉토리 안에images디렉토리를 생성합니다.- 사진을
public/images디렉토리에profile.jpg로 저장합니다. - 이미지 크기는 약 400px × 400px 정도로 설정합니다.
public디렉토리에서 사용하지 않는 SVG 로고 파일은 제거해도 됩니다.
최적화되지 않은 이미지(Unoptimized Image)
일반 HTML을 사용하면 프로필 사진을 다음과 같이 추가합니다:
<img src="/images/profile.jpg" alt="Your Name" />하지만 이렇게 하면 다음과 같은 작업을 수동으로 처리해야 합니다:
- 이미지가 다양한 화면 크기에서 반응형으로 표시되도록 하는 작업
- 이미지를 서드파티 도구나 라이브러리를 사용하여 최적화하는 작업
- 이미지가 뷰포트에 진입할 때에만 로딩되도록 하는 작업
등등의 작업이 필요합니다. 대신, Next.js는 이를 위해 image 컴포넌트를 제공하여 자동으로 처리할 수 있습니다.
이미지 컴포넌트와 이미지 최적화(Image Component and Image Optimization)
next/image는 HTML <img> 요소의 확장 버전으로, 현대적인 웹에 맞게 발전한 것입니다.
Next.js는 기본적으로 이미지 최적화를 지원합니다. 이를 통해 브라우저가 지원하는 경우에는 WebP와 같은 현대적인 형식으로 이미지의 크기를 조정하고 최적화하여 제공할 수 있습니다. 이를 통해 작은 뷰포트를 가진 장치에 대용량 이미지를 전송하지 않을 수 있습니다. 또한, Next.js는 자동으로 향후 이미지 형식을 채택하고 해당 형식을 지원하는 브라우저에 제공할 수 있습니다.
자동 이미지 최적화는 모든 이미지 소스와 함께 작동합니다. 이미지가 CMS와 같은 외부 데이터 소스에 호스팅되는 경우에도 최적화할 수 있습니다.
이미지 컴포넌트 사용하기(Using the Image Component)
Next.js는 이미지를 빌드 시간에 최적화하는 대신, 사용자가 요청할 때 필요한 시점에 이미지를 최적화합니다. 정적 사이트 생성기와 정적 전용 솔루션과 달리, 10개의 이미지든 1000만 개의 이미지든 빌드 시간이 증가하지 않습니다.
이미지는 기본적으로 지연 로딩됩니다. 즉, 뷰포트 외부에 있는 이미지로 인해 페이지 속도가 저하되지 않습니다. 이미지는 뷰포트로 스크롤되면 로드됩니다.
이미지는 항상 누적 레이아웃 이동(Cumulative Layout Shift)를 피하도록 렌더링됩니다. 이는 Google이 검색 순위에 사용할 핵심 웹 요소(Core Web Vital)입니다.
다음은 next/image를 사용하여 프로필 사진을 표시하는 예시입니다. height와 width props는 원하는 렌더링 크기여야 하며, 소스 이미지와 동일한 종횡비를 가져야 합니다.
참고: 이 컴포넌트는 "레이아웃 디자인 개선"에서 나중에 사용할 예정이므로 지금은 복사할 필요가 없습니다.
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 참조를 확인해보세요.
출처: https://nextjs.org/learn/basics/assets-metadata-css/assets
