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
'Frontend > Next' 카테고리의 다른 글
"Page Router" vs "App Router" (0) | 2024.04.11 |
---|