Next.js에서 SVG아이콘 import 했을 때 에러

Next.js에서 svg아이콘을 import해서 사용하려고 하는데 에러가 났다.

Module not found: Can't resolve '@svgr/webpack'

import ChampionsSvg from "../../public/assets/images/champions.svg";

https://nextjs.org/docs/messages/module-not-found

에러를 검색해보니 next.js에서는 svg를 import해서 쓰려면 따로 패키지를 설치해야 했다.

npm install --save-dev @svgr/webpack
yarn add --dev @svgr/webpack

그 다음 next.config.js를 설정한다.

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

module.exports = nextConfig;