[Next.js] 에서 SVG 파일 사용하는 법 (feat. svgr 웹팩 설정하기, Image tag 사용하기)

Unhandled Runtime Error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of Header.

svg 파일을 import하여 불러오기만 하면 자꾸 이 에러가 떠서.. 찾아보다가 svgr 라이브러리를 설치해서 웹팩을 설정해주니 아주 잘 불러와지더랍니다?
(이전 nextjs 프로젝트에서는 잘만 불러왔는데 갑자기 왜그러시는지...)

---

여튼 svgr 라이브러리를 사용해보자,,~!

1. svgr 라이브러리 사용하기

✅ svgr이란?

SVG 파일을 react나 nextjs에서 쉽게 다루기 위해서 만들어진 webpack 설정이자 babel 설정으로, 이를 이용하면 SVG 파일을 컴포넌트화 하여서 사용할 수 있다.

1. 설치

# yarn
yarn add -D @svgr/webpack

# npm
npm install -D @svgr/webpack

2. next.config.js 에 웹팩 설정 추가
   이 웹팩이 코드를 build할 때 svg 파일을 자동으로 리액트 컴포넌트화 해준다고 합니다!

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

    return config;
  },
};

module.exports = nextConfig;

3. 컴포넌트에서 SVG 사용하기

import LogoSVG from "public/assets/logo.svg";

const Header = () => {
  return (
    <div>
      <LogoSVG />
    </div>
  );
};

export default Header;

---

이 방식은 SVG 내부의 path에 접근하거나, fill, stroke 등의 스타일을 props로 넘길 수도 있어서 굉장히 유연합니다.

🧐⚠️ 위 방법도 되지 않는다면 ...

2. Image tag 사용하기

Next.js는 기본적으로 svg를 이미지 파일로 처리하도록 되어 있다고 합니다.
따라서, 컴포넌트로 쓰는 게 아니라 단순 이미지로만 쓰면 된다면 아래처럼 next/image 태그를 사용하는 방법도 있습니다.

import Image from 'next/image';
import LeftBtnSVG from '../../public/assets/icons/leftBtn.svg';

<Image src={LeftBtnSVG} alt="leftBtn" width={35} />

이런 식으로 Image 태그를 사용하여 src 안에 넣어주는 방법이 있다!

이 경우에는 SVG 내부 path에 직접 접근할 수 없지만, 정적인 이미지로 쓸 때는 적합한 방식일 것 같네요!