[TIL] Next.js - Image 컴포넌트

오늘 공부한것 & 기억하고 싶은 내용

Image 컴포넌트

기본 jsx img가 지원하지 않는 여러가지 강력한기능을 지원한다.

• 로딩 전후로 컴포넌트 위치가 밀리는 content shift를 방지한다.
• 압축률이나, 화면 크기별 압축 옵션을 제공한다.
• 필수 prop으로 src, width, height, alt를 입력해야한다.
• width, height를 모른다면, fill을 써주면 된다.
• fill은 이미지를 자동으로 부모컴포넌트의 크기로 맞춰주는 역할을 한다.

	<Image fill src={photo} alt={title} /> //quality 속성도 있음 (1이면 화질이 저하됨)

Image Hostnames

• NextJS의 Image는 이미지를 자동으로 최적화를 해주어 성능을 향상시키고 빠른 로딩이 되도록 해 준다.
  하지만 외부 호스트의 이미지(다른 사이트의 이미지 링크 등)를 불러올 때는 보안 상의 이유로 이 기능이 허용되지 않는다.
  따라서 next.config.mjs에서 hostname들을 등록해 주어야 한다.
  (nextConfig > images > remotePatterns > hostname)

import type { NextConfig } from "next";

const nextConfig = {
  images: {
    remotePatterns: [
      {
        hostname: "avatars.githubusercontent.com",
      },
    ],
  },
};

export default nextConfig;

배운점 & 느낀점

매번 이미지 크기로 고통 받았는데, Next.js는 알아서 이미지도 맞게 넣어주고 최적화도 해준다니 정말 갓벽한거 같다..