next/image

이미지를 넣을 때 사용한다. <Image /> 컴포넌트에는 세 가지 필수 prop이 들어가야 한다.

• src
• width
• height

width와 height 대신 이미지를 꽉 채울 수 있는 layout: fill을 사용할 수도 있다.

next.config.js에서의 domains

외부 이미지를 사용할 경우에는 next.config.js에서 도메인을 설정해주어야 한다. 악성 사용자로부터 어플리케이션을 보호하기 위해서라고 한다.

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ["via.placeholder.com", "image.google.com"]
  }
}

module.exports = nextConfig

장점

• 성능 향상
• CLS(Culmulative Layout Shift) 방지
• 빠른 페이지 로드 : 이미지가 뷰포트에 들어왔을 때에만 로드되므로 초기 페이지 로드 속도가 빠르다(마치 리액트 윈도우 같은디)

[React] Next JS 이미지 최적화, 이미지 컴퍼넌트 / Image Component / Image Optimization