Next.js에서 svg 사용하기

svgr 플러그인을 사용해서 svg 이미지를 가져와서 사용해 보자.
먼저 플러그인을 설치해 준다.

1. 설치

npm install @svgr/webpack

yarn add @svgr/webpack

2. config 설정

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    // 기존 URL 파일로더 규칙을 가져옵니다.
    const fileLoaderRule = config.module.rules.find((rule) =>
      rule.test?.test?.(".svg")
    );

    config.module.rules.push(
      {
        ...fileLoaderRule,
        test: /\.svg$/i,
        resourceQuery: { not: /components/ },
      },
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        resourceQuery: /components/,
        use: ["@svgr/webpack"],
      }
    );

    return config;
  },
  experimental: {
    turbo: {
      loaders: {
        ".svg": ["@svgr/webpack"],
      },
    },
  },
};

module.exports = nextConfig;

위와 같이 next.config.js에 설정을 추가해 준다.
설정을 살펴보자.

아래는 URL 로더 규칙을 찾는 부분이다.

 const fileLoaderRule = config.module.rules.find((rule) =>
      rule.test?.test?.(".svg")
    );

해당 코드로 찾은 규칙을 기반으로 새로운 규칙을 추가해 준다.

    config.module.rules.push(
      {
        ...fileLoaderRule,
        test: /\.svg$/i,
        resourceQuery: { not: /components/ },
      },
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        resourceQuery: /components/,
        use: ["@svgr/webpack"],
      }
    );

위 규칙에 /components/ 문자열이 포함되지 않는 경우, js, ts, jsx, tsx에서 가져온 경우에만 해당되는 규칙을 추가했다.
"@svgr/webpack" 라이브러리를 사용하여 컴포넌트로 변환한다는 설정이다.

 experimental: {
    turbo: {
      loaders: {
        ".svg": ["@svgr/webpack"],
      },
    },
  },

experimental 설정은 이름 그대로 실험적인 기능을 추가하는 것이다. turbo 모드는 최적화 기능을 제공한다.

이제 svg를 src로 가져올 수 있다.