NextJS Svg 못 읽어오는 경우 해결

에러내용

# Server Error

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

해결

타입스크립트까지 정리를 해두려고 한다.

패키지 설치

$ npm install --dev @svgr/webpack 

next.config.js 파일 수정

//next.config.js 
const nextConfig = {
    ...
    webpack: config => {
        config.module.rules.push({
            test: /\.svg$/,
            use: ['@svgr/webpack'],
        });
        return config;
    },
};

module.exports = nextConfig;

타입스크립트 SVG 타입 추가 수정

프로젝트 내 최상단에 @types/custom.d.ts 파일을 생성한다.

//@types/custom.d.ts
declare module '*.svg' {
  import React = require('react');

  export const ReactComponent: REact.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

tsconfig.json 파일 수정

./@types/*.d.ts 추가

{
...,
"include" :  [ "./@types/*.d.ts"]
}