"Warning: Prop `className` did not match" 에러 이유 및 해결방법

1. Warning: Prop `className` did not match" 에러 이유 

• Next.js랑 Styled Components를 함께 사용할 경우 발생하는 에러임
• 서버에서 렌더링된 컴포넌트의 className이 클라이언트에서 렌더링된 className랑 일치하지 않아서 생기는 에러임
• 이런 에러는 서버사이드 렌더링(SSR)이 발생할때 생길수 있는 에러로 초기렌더링 될때만 발생하고 그 이후엔 발생하지 않음

2. Warning: Prop `className` did not match" 해결 방법

• 해결방법은 의외로 간단함 프로젝트 파일에 next.confing.js를 변경만해주면됨 
• 프로젝트를 만들면 초기에 아래와 같이 코드가 작성 되어있을텐데

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

export default nextConfig;

• 위의 코드를 아래와 같이 변경해주고 확인해보면 에러가 뜨지 않게됨

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

module.exports = nextConfig