[React, NextJS] Module parse failed: Unexpected character '' (1:0) 에러 수정 및 Next에서 이미지 import 되도록 설정

오늘 기능 좀 만들어볼까 했더니 Module parse failed: Unexpected character '' (1:0) 에러가 떠서 몇 시간 동안 헤맸다. 

 

기본적으로 nextjs의 최근 버전에서 import/export로 이미지를 불러오는 것을 지원하지 않는 것 같고 next-image라는 것을 따로 설치하여 설정을 해준다. 

 

이에 따라 next-image 밑 next.config.js 설정을 해줘도 위의 에러는 사라지지 않았다. 

stackoverflow에서는 webpack 얘기가 등장하는데 다른 사람들은 안해줘도 되던데 나는 해줘야되나? 싶어서 다른 해결방법을 찾아봤는데 결론은..  결국 webpack.config.js에서 file-loader 설정을 해줘야된다. (이 에러가 난 사람이라면 필수)

왜 사람마다 차이가 있는지는 잘 모르겠다.

 

일단 webpack 설정 먼저 해서 위의 에러부터 없애보자.

 

1. yarn add --dev file-loader  

2. webpack.config.js 파일 생성 (가장 위 루트에)

3. webpack.config.js 내용 작성 

module.exports={
loaders:[  {
    test: /\.(gif|svg|jpg|png)$/,
    loader: "file-loader",
  }]

}

이렇게 했더니 에러는 해결됐다. 

 

하지만 import/exeport 구문으로 이미지가 가져와지지 않았다. next-image를 설치해준다. 

 

1. yarn next-image --dev 

2. next.config.js 파일 생성 및 있다면 내용 작성 

// next.config.js
const withImages = require('next-images')

module.exports = withImages(); // 이렇게만 해줘도 된다고 나온다.다른 설정도 같이 해주면 감싸주자.

3. 사용해보자 

layout="fill"은 해당 부모 레이아웃에 꽉 채우는 것 같다.

만약 이 속성을 안쓴다면 Image에 width와 height를 꼭 설정해줘야한다.

import Image from 'next/image';
import one from './opening-1.png'
const Opening = () => {
    return (
        <div>
            <Image src={one} layout="fill"></Image>
        <div>
    )
}

export default Opening

 

만약 next.config.js에 설정을 해주지 않으면 image가 기본 public 폴더에 있을 경우 "/public/test.png"가 아니라 "/test.png" 이런식으로 가져온다.