NextJS Image

Image Tag

먼저 next에서는 아래와 같이 이미지를 불러올 수 있는 기능을 제공한다.

next/image - Next.js

import Image from "next/image";
export default function Header() {
  return (
    <>
      <Image
        src='/'
        width=''
        height=''
    	/>
    </>
  );
}

img 태그를 사용하지 않고 Image를 사용하는 이유를 요약하자면 아래와 같다.

Image Optimization - Next.js

1. Next.js의 Image 태그는 최신 웹용으로 확장된 next/imageHTML img요소이다.

2. 브라우저에서 지원하는 경우 JPEG보다 약 30 % 작은 WebP와 같은 최신 이미지 형식으로 이미지를 자동으로 제공한다.
   (필요에 따라 이미지 최적화)

3. 뷰포트를 스크롤하는 동안 특정 임계 값에 도달 한 경우에만 페이지 내부의 이미지를 지연로드한다.

4. 동적으로 사용할 다양한 및 사용자 정의 해상도에 대해 다른 이미지 크기를 지정할 수 있다.

5. 사진의 품질을 75 %로 설정된 낮은 임계 값으로 자동 변경한다
   (각 호출에 대해 변경 가능)

Image Usage?

NextJS 프로젝트를 진행할 때 이미지를 사용하는 방법은
1. public 에 넣고 사용하기도 하고
2. backend에서 받아서 사용
이 대부분일 것이다.

하지만 그 이외의 위치에 있는 이미지를 import 하려는 매커니즘을 사용하려고 보니 오류가 났었다.

코드

import image from '../images/image';

// or

const image = require('../images/image');

// ...

Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

NEXT의 모듈을 import 할 때 이미지 파일은 할 수 없는 설정인 것 같았다.

이 문제는 아래와 같은 라이브러리를 통해 해결할 수 있었다.

Image Import !

Install

next-images

npm install --save next-images

를 통해 다운로드 할 수 있는데 이미지 Load 같은 역할 이외에도 많은 것을 하는 라이브러리이다.

Webpack Config

NEXT에서 webpack 설정을 하는 next.config.js 파일을 프로젝트의 root 위치에 생성하고 다음과 같이 작성하여야 한다.

const withImages = require('next-images')
module.exports = withImages()

config 설정을 통해 module 을 import 할 때 image 도 받게 할 수 있는 설정이다.

다른 플러그인을 추가할 수도 있는데, 이는 공식문서에서 확인하고 사용하면 좋을 것 같다!