[Next.js] SSR Error

로컬에서는 문제 없었는데 vercel에 배포하고나니 에러메세지가 떴다.

5769-19fcdbf9d4c26464.js:1 Uncaught Error: Minified React error #425; visit https://reactjs.org/docs/error-decoder.html?invariant=425 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

5769-19fcdbf9d4c26464.js:1 Uncaught Error: Minified React error #425; visit https://reactjs.org/docs/error-decoder.html?invariant=423 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

5769-19fcdbf9d4c26464.js:1 Uncaught Error: Minified React error #425; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

참고 이슈
https://github.com/vercel/next.js/issues/37489

원인 : new Date했을 때 클라이언트의 시간과 서버의 시간이 맞지 않기 때문이라고 한다. (Next.js의 에러가 아닌 React18 이슈)

• new Date()를 빌드 시점에 UTC로 가져오지만 페이지를 요청했을 때는 Asia/Seoul로 가져와서 발생하는 문제

해결 : 해당 날짜 처리 함수를 동적 임포트로 로드해 처리하거나 useEffect를 사용해 마운트 된 후 날짜 변환 처리를 해주면(클라이언트에서 강제 렌더링) 해결.

  // app/page.tsx 에서 렌더링했더니 오류메세지가 없어졌다.

  const [selectedDate, setSelectedDate] = React.useState(new Date());

  React.useEffect(() => {
    const date = new Date();
    setSelectedDate(date);
  }, []);