Next에서는 기본적으로 Html에서 제공하는 img 태그와 별개로 기본적으로 Image컴포넌트를 제공한다.

왜 Image컴포넌트를 제공할까?

Image 컴포넌트는 Automatic Image Optimization을 제공한다.

Automatic Image Optimization은 작은 뷰포트를 가진 기기에 큰 이미지를 가져오는 것을 방지 (메모리 낭비방지)

이미지 포맷을 자동 채택하고 브라우저에게 제공한다.

이미지 요청시 이미지 최적화를 적용 한다.
이미지 지연로드를 지원한다. (속도 개선)
즉 전체 이미지들을 불러오는 것이 아닌 뷰포트에 보일 때 로드를 한다.

사용법

기본적으로 width, height, src, alt를 입력해줘야한다.
소스를 보면 src에 외부 url를 넣어줬는데 외부 url 사용시 next.config.js에 외부 url을 사용한다고 알려줘야 에러가 발생하지않는다.

Wrpper로 감싼 이유는 향후에 marin과 radius를 컨트롤 해줘야하기 때문이다.

import React from 'react'
import styled from 'styled-components'
import ImageTag from 'next/image'

interface Props {
   width?: string
   height?: string
   src?: string
   alt?: string
   radius?: string
   margin?: string
}

const Image = ({
   width = '100px',
   height = '100px',
   src = 'https://i.pinimg.com/564x/b9/cd/cc/b9cdccde10d5a581874f58bb7e914962.jpg',
   alt,
   radius = '50%',
   margin = '50px',
}: Props) => {
   return (
       <ImgWrapper
           width={width}
           height={height}
           margin={margin}
           radius={radius}>
           <ImageTag width={width} height={height} src={src} alt={alt} />
       </ImgWrapper>
   )
}

interface wrapperProps {
   width?: string
   height?: string
   margin?: string
   radius?: string
}

const ImgWrapper = styled.div<wrapperProps>`
   width: ${(props) => props.width};
   height: ${(props) => (props.height ? props.height : '120px')};
   margin: ${(props) => props.margin};
   border-radius: ${(props) => props.radius};
   overflow: hidden;
`

export default Image

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
   reactStrictMode: true,
   images: {
       domains: ['i.pinimg.com'],
   },
}

module.exports = nextConfig

출처: https://birdmee.tistory.com/9