Symbol
[Next.js] Error: Minified React error {hash};
Next.js 에서 Minified React error 에러 발생 원인과 해결법에 대해 설명합니다.
2024-03-18
로컬 환경과 Dev환경에서는 발생하지 않다가 Product 환경에서만 아래 에러가 발생했습니다.
[Next.js] Error: Minified React error #425; visit {file} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

원인

검색해보니 서버와 클라이언트의 리전이 다를 때 화면에 날짜 데이터 등을 표시할 때 발생하는 에러였습니다.
제가 이번에 진행한 프로젝트는 다국어를 지원하는 글로벌 웹사이트 구축이었는데요,
로컬과 Dev서버 리전은 국내에, Product서버 리전은 해외 리전을 사용하고 있어, Product 환경에서만 해당 에러를 발견할 수 있었습니다.
SSR 시점에서는 new Date() 함수가 유럽의 Local Timezone(UTC 0 ~ +1)을 사용하다가 대한민국 서울에 있는 Client PC에서 렌더링 하려고 보니 타임존이 (UTC +9) 일치하지 않아 Hidrate 에러가 발생한 것이었습니다.

해결법

useEffect Hook 등을 사용하여 SSR을 건너 뛰고 CSR 에서만 화면에 그리는 방식으로 접근하면 해결할 수 있습니다.