Next.js 13 + typescript에서 styled-component 사용하기 (바벨이랑 충돌나는 분 오셈~)

next.js 13 버전을 사용하던 중 sass에서 styled-component로 갈아타려고 합니당.

우선 styled-components를 설치

npm i styled-components

npm i @types/styled-components

넥스트에서 styled-compoenets를 사용하면 스타일이 적용되지 않은 html이 먼저 렌더링 되는 문제가 있어
보통 babel-plugin-styled-components를 설치하고 .babelrc 파일에서 설정을 해주는데 그렇게 하니 아래와 같은 에러가 발생했답니다~!!

Syntax error: "next/font" requires SWC although Babel is being used due to a custom babel config being present.
Read more: https://nextjs.org/docs/messages/babel-font-loader-conflict

어머... 성장할 기회당....🥲

바벨 플러그인을 다시 uninstall 해주고 .babelrc도 삭제! next13에서는 next.js 컴파일러로 해결이 가능했네요^~^

next.js의 컴파일러를 설정해주러 갑니다!!

/** @type {import('next').NextConfig} */

const nextConfig = {
  reactStrictMode: true,
  compiler: {
    styledComponents: {
      ssr: true,
      displayName: true,
    },
  },
};

module.exports = nextConfig;

이 외 나머지 세팅들은 기존과 같습니다~!

참고링크 : https://nextjs.org/docs/advanced-features/compiler