[Next.js] 새로고침 시 styled-components 적용 안되는 문제 - 2

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

export default nextConfig;

위 코드에서

 swcMinify: true,
  compiler: {
    styledComponents: true,
  },

를 추가해주면, 새로고침 해도 스타일이 아주 잘 보인다 :)

Next.js의 12 버전부터 Babel 대신 SWC 컴파일러가 도입되었다고 한다!

1. swcMinify: true를 추가해줌으로써 Minificatio을 적용한다.

2. 아래 코드는 기존 Babel의 내용이 옮겨지는 요소라고 한다. Styled-components를 Next.js와 함께 사용할 때는 babel-plugin-styled-component를 설치하고 ssr을 켜줘야 하는데 이 부분을 아래 코드로 간단하게 설정해줄 수 있다는 것이다 !

 compiler: {
    styledComponents: true,
  },