빌드 중 svg Module not found error (Next.js)

vercel 빌드 중에 svg를 찾을 수 없다는 에러 메세지가 나왔다. 찾아보니까 Nextjs에서 svg를 사용하려면 @svgr/webpack을 사용해야한다고?

 

그래서 일단 npm i -D @svgr/webpack command로 설치하고, 프로젝트 루트에 있는 next.config.mjs에 다음과 같이 설정을 추가했다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    config.module.rules.push({  // 웹팩 설정에 로더 추가
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ["@svgr/webpack"],
    });
    return config;
  },
};
export default nextConfig;

 

저 설정만하면 컴포넌트로만 svg를 사용할 수 있어서, 나는 svg를 다음과 같이 만들어줬다.

 

/components/svg/Airbnb.js

export function Manimirror() {
  return (
    <svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path 
        ... path 설정 ..
      />
    </svg>
  );
}

export function Emptymirror() {
  return (
    <svg width="112" height="112" viewBox="0 0 112 112" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path 
        ... path 설정 ..
      />
    </svg>
  );
}

 

이렇게 컴포넌트로 만들어두고 사용할 컴포넌트에서는 <Emptymirror />  이런 식으로 사용했음

 

설정을 완료하고 push했더니 다음과 같이 배포 성공 ~ !