Next.JS에서 styled-components 사용하기

Next.JS에서 styled-components를 사용하면

Warning: Prop `className` did not match. Server: "sc-gswNZR iCCgiY" Client: "sc-bcXHqe eeJMcQ"

와같은 에러를 볼 수 있다. 

이것은 Next.JS가 기본적으로 페이지를 SSR을 통해 pre-rendering을 하기 때문에 SSR시의 className과 CSS-in-JS로 렌더링이 된 className이 맞지 않아서 생기는 경우이다.

이럴때 여러가지 방법이 있는데 가장 간단한 방법으로는 next.config.js파일을 수정하는 방법이 있다.

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

module.exports = nextConfig

위 와 같은 파일의 내용을 아래와 같이 내용을 변경해주면 된다. 

아래 형식은 간단하게 한거지만 세세하게도 가능하다.

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

module.exports = nextConfig

좀 더 자세한 내용은 참고한 링크를 첨부한다.

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