Next.js에서 svg import 하기 (#babel-plugin-inline-react-svg)

✔️ 설치

yarn add babel-plugin-inline-react-svg

 

 

✔️ .babelrc

"plugin"에 "inline-react-svg"를 추가한다

{
  "presets": ["next/babel"],
  "plugins": [
    "inline-react-svg",
    [
      "styled-components",
      {
        "ssr": true
      }
    ]
  ]
}

 

 

✔️ types/index.d.ts

typescript 때문에 아래와 같은 설정을 해주는 것이다. 위치와 파일 이름은 아무래도 상관없다!

declare module "*.svg"

 

 

✔️ 에러

위의 내용을 잘 설치했는데도 에러가 난다. 

TypeError: Cannot read properties of undefined (reading 'uid')

 

이건 Next의 에러 문제로 package.json에서 next의 버전을 @12.0.8-canary.19 로 바꿔준다. 나중에 문제가 해결되서 업데이트되면 안해도 되겠지만~

“next”: “^12.0.8-canary.19"