Warning: Prop `className` did not match (NextJS + Typescript + Marterial UI)

개요

NextJS + Typescript + Marterial UI로 프로젝트 셋팅을 하는 도중에 이하의 경고가 나와서 해결하는 과정이다.

 

Warning: Prop `className` did not match. Server: "MuiTabs-root sc-dkrFOg hGikSv mui-style-1ujnqem-MuiTabs-root" Client: "MuiTabs-root sc-bcXHqe kyhmoB mui-style-1ujnqem-MuiTabs-root"

원인

SSR을 기본으로 하는 next에서 CSR을 할 때와 className이 매칭이 안된다? 라고 나와있는데 MUI를 사용하는데 있어서 SSR을 위한 별도의 설정이 필요하다는 말인듯 하다.

해결

밑의 샘플코드에 적혀져있는 부분들을 그대로 갖고와서 copy해줬다.

없는 패키지들을 추가하고

_app.tsx, _document.tsx, createEmotionCache.ts, theme.ts 등을 추가 수정해 주었다.

https://github.com/mui/material-ui/tree/HEAD/examples/nextjs-with-typescript

GitHub - mui/material-ui: MUI Core: Ready-to-use foundational React components, free forever. It includes Material UI, which imp