Next.js - Image Optimization

Next.js의 'next/image'는 HTML의 '<img>'을 계승한 컴포넌트이다 ( 최신의 웹을 위해 진화된 것 ). 이는 엄청난 퍼포먼스를 지닌 이미 최적화되어 갖추어진 변수들이 많다. 이는 사용자 경험에 엄청나게 많은 평가 지표가 될 이다.

 

• Improved Performance
  •  어떠한 기기든 정확하게 사이징 된 이미지를 보여준다. 
• Visual Stability
  • 누적 레이아웃 이동 자동 방지
• Faster Page Loads
  • 이미지가 오직 viewport를 들어왔을 떄만 로딩된다.
• Asset Flexibility
  • 멀리 떨어진 서버에 캐싱된다.

Local Images

우린 'next/image'를 import하면 우리의 local파일들을 import해 올 수 있다.

또한 Dynamic 'await import()' 는 지원되지 않는다. 그 이유는 build되는 과정에서 정적인 요소들이 분석되어야 하기 때문이다.

Next.js는 로컬에서 import되어진 이미지의 width와 height를 자동으로 결정한다. 이러한 값은 이미지를 로드하는 동안 누적 레이아웃 이동을 방지하는 데 사용됩니다.

누적 레이아웃 이동(CLS) 메트릭은 사이트의 전체 레이아웃 안정성을 측정합니다. 페이지가 로드될 때 예기치 않게 레이아웃을 변경하는 사이트는 사용자 오류 및 주의 산만함을 초래할 수 있습니다.

누적 레이아웃 이동(CLS)은 DOM에 의해 처음 렌더링된 후 요소가 이동될 때 발생합니다. 여기서 버튼은 텍스트 블록 뒤에 있는 화면에 렌더링되어 블록이 아래로 이동하게 됩니다. CLS를 계산할 때 충격과 거리의 조합을 고려합니다.

각 요소의 개별 배치 이동 점수는 예기치 않은 이동이 발생할 경우에만 CLS 쪽으로 계산됩니다. 새 요소가 DOM에 추가되거나 기존 요소의 크기가 변경되는 경우 로드된 요소가 위치를 유지하면 레이아웃 이동으로 계산되지 않습니다.

// pages/home/index.tsx

import type { ReactElement } from "react";
import type { NextPageWithLayout } from "../_app";
import styles from "../../scss-styles/HomePage.module.scss";
import Image from "next/image";
import profilePic from "../../public/happy.jpg";

const Home: NextPageWithLayout = () => {
  return (
    <div className={styles.homePageOuterContainer}>
      <h1>My Homepage</h1>
      <Image src={profilePic} alt="Picture of the author"></Image>
      <p>Welcome to my homepage</p>
    </div>
  );
};

export default Home;

Image의 옵션중 width, height는 자동으로 계산되며, 로딩될 때 blur처리 해주는 옵션인 blurDataURL: "data...", placeholder="blur" 또한 자동으로 default하게 제공된다.

Remote Images

또한 remote image를 사용할 경우 'src'속성은 무조건 URL 문자열 방식으로 해야 한다. 상대경로, 절대경로 모두 다 된다. 그 이유는 Next.js가 build time에 remote file에 접근할 권한이 없기 때문이다.

Styling

내부 <img> 스타일을 지정하는 권장 방법은 이미지 구성 요소의 className prop을 가져온 CSS 모듈의 값으로 설정하는 것입니다. className 값은 기본 <img> 요소에 자동으로 적용됩니다.