반응형
Warning: Prop `className` did not match. Server: "sc-hmdomO rgEEX" Client: "sc-jlZhew bwbgGd" at button at P (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:31:19658) at Button (webpack-internal:///./components/Button.tsx:19:23) at div at P (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:31:19658) at Page (webpack-internal:///./pages/recoil.tsx:30:78) at Provider (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:13:3) at App (webpack-internal:///./pages/_app.tsx:27:24) at _PathnameContextProviderAdapter (webpack-internal:///./node_modules/next/dist/shared/lib/router/adapters.js:118:24) at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:305:63) at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:854:919) at Container (webpack-internal:///./node_modules/next/dist/client/index.js:149:5) at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:314:24) at Root (webpack-internal:///./node_modules/next/dist/client/index.js:533:25) See more info here: https://nextjs.org/docs/messages/react-hydration-error
Next.js에서 Emotion을 사용할 때는 해당 에러를 마주한 적이 없었는데, styled-components 라이브러리를 사용하고 해당 에러를 만나게 되었습니다.
해당 에러의 경우 Next.js에서 styled-components를 사용할 경우 className이 달라서 생기는 에러입니다.
npm run dev를 통해서 첫 화면 로딩 시에는 해당 에러가 발생하지 않지만, 개발을 하면서 코드가 변경될 시 해당 에러가 발생하는 것을 확인하였습니다. 원인은 첫 로딩 시 서버사이드 렌더링(SSR)으로 화면을 그리게 되고, 그 이후부터 클라이언트사이드 렌더링(CSR)으로 화면을 그리기 때문에 서버와 클라이언트의 클래스명이 동일하지 않기 때문에 발생하는 에러입니다.
해결 방법
(1) babel-plugin-styled-components 설치
npm i -D babel-plugin-styled-components설치 후 루트 디렉토리의 .babelrc 파일에 설정을 해줍니다.(없을 시 .babelrc 파일 생성!)
{
"presets": ["next/babel"],
"plugins": ["babel-plugin-styled-components"]
}
(2) Next.js 12 버전부터는 (1) 번 방식으로 해결되지 않을 수 도 있습니다. 12 버전부터는 babel 대신 swc를 사용하여 컴파일하도록 업데이트되었기 때문에 아래와 같이 next.config.js 파일에서 styledComponents 관련 설정을 하여 해결해 줍니다.
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: false,
compiler: {
styledComponents: true,
},
};
module.exports = nextConfig;
반응형