next js image사용시 팁

넥스트 js에서 제공하는 next/image는 사용하기 까다롭다. width, height, layout 조건등이 다 맞아야 사용가능하다.

게다가 외부 url이미지를 사용하려면 일일히 next.config.js에 해당 url 도메인도 등록해야한다.

module.exports = {
images: {
      domains: ["cdn.pixabay.com", "dog.ceo"]
}
};

이 얼마나 성가신가?

그래서 우리는 기존의 말랑말랑한 img태그를 사용하고 싶다.
그렇다면 next-images를 사용하면된다(https://www.npmjs.com/package/next-images)

npm install --save next-images로 설치하고
next.config에
// next.config.js
const withImages = require('next-images')
module.exports = withImages()
이것만 추가해주면 우리는

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

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

반가운 이미지 태그를 사용가능하다. 이 이미지 태그는 기존 이미지 태그처럼 사용가능해서 유용하다.