[Next]Next.js에서 이미지 사용하기

Next에서 이미지를 사용하는건 여간 쉽지가 않다.

공식문서에는 다음과 같은 레퍼런스를 제공하고 있다.

이미지 컴포넌트 자체를 Next에서 제공해주고 있다.

뭔가 고마운거 같지만 써보면 참 그렇다.

일단은 Image 컴포넌트를 사용 시, src, width, height 속성이 필수불가결이다.

이 셋 중 하나가 빠지면 오류가 발생한다 ㅡㅡ...

서버에서 데이터를 받아와서 이미지를 뿌려줘야 하는데 정말 막막하다.

그래서 검색을 해보니 next-images라는 모듈이 있었다.

한줄기 빛이자 희망이었다.

먼저 모듈을 설치부터 하자!

설치 : npm i next-images

공식 문서에서 제공해준 config 설정을 적용해야 next에서 사용이 가능하다.

// next.config.js

const withImages = require('next-images')
module.exports = withImages({
  webpack(config, options) {
    return config
  }
})

다음과 같이 config 설정을 완료 했으면 사용하면 된다!

기본 사용법은 다음과 같다.

export default () => <div>
  <img src={require('./my-image.jpg')} />
</div>

OR

import img from './my-image.jpg'

export default () => <div>
  <img src={img} />
</div>

하나는 src 속성에 직접 require해서 사용하는 방법이고

다른 하나는 이미지를 모듈처럼 import해서 src 속성에 변수로 때려 박는 방법이다.

내가 선택한 방법은 전자도 후자도 아니었다.

그냥 다음과 같이 변수로 때려 넣었다.

<div>
  <img src={url} />
</div>

이외에도 이미지를 넣는 다양한 방법들이 있겠지만 next-images에 일단은 만족하며 마무리하겠다.