Next.JS 에서 SVG 사용하는 방법

React 에서 평소 사용하던 방식으로 svg 를 사용했다.

import { ReactComponent as TestSvg } from "testSvg.svg";

<TestSvg />;

이렇게 사용하면 ReactComponent 에 빨간줄이 뜨면서 에러가 발생한다.

처음엔 typescript 관련된 에러인 줄 알고 typescript 에 custom.d.ts 를 추가하고 어쩌고 저쩌고를 했으나 그대로 실행되지 않았다.

nextjs 에서는 svgr/webpack 을 설치해야 한다.

npm install -D @svgr/webpack

그 이후, next.config.js 를 수정한다.

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  webpack: config => {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ["@svgr/webpack"]
    });
    return config;
  }
}

마지막으로 읽어올 때는, 중괄호 없이 이름만 지정해서 가져오면 된다!

import TestSvg from "testSvg.svg";

<TestSvg />;