👿 Problem
문제
Next.js에서 Material UI를 쓸 때 새로 고침 or 페이지 이동 시 경고가 뜸.
원인
MUI는 IDs가 포함된 dynamic className을을 사용하는데 SSR에서의 IDs는 CSR에서의 CSS와 같지 않아서 mismatch error가 발생하는 것.
Next.js는 첫 렌더링 시 SSR로 렌더한 후 페이지 이동이나 새로고침 시 CSR로 렌더한다.
😇 Solution
SSR stylesheet를 제거하고 새 CSR stylesheet로 대체한다.
module.exports = { reactStrictMode: false, // MUI 버전 4는 strict mode를 지원하지 않음 images: { domains: ['picsum.photos'], }, }
- Next.js는 기본적으로 strictMode임.
- 추가적으로 MUI 4버전에선 reactStrictMode를 지원하지 않기 때문에 false로 꺼줘야 함.
import dynamic from 'next/dynamic' const Slider = dynamic(() => import('components/domain/ScoreSlider'), { ssr: false, })
- MUI가 쓰인 컴포넌트를 import할 때 ssr을 꺼주기
