Next.js : Minified React error #425 해결하기

얼마 전 부터 Next에서 리액트 에러가 나기 시작했다.

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.

자세한 에러를 찾아왔더니 다음과 같았다. Text content does not match server-rendered HTML.

서버에 렌더링된 것과 로컬에 렌더링된 것이 맞지 않는 다는 것이다. 알다시피 넥스트는 서버에서 한 번 프론트에서 한 번 총 두번의 렌더링을 거친다.

그런데 문제는 이게 로컬 서버에는 안나오고 프로덕션 서버에만 나온다는 것이다. 만약 로컬 서버에서 나온다면 에러의 원인이 뭔지 알려주기 때문에 쉽게 고칠 수 있다.

오늘 오후에 한참을 찾아보다가 원인을 알게 되었다. 바로 시간이었다.

서버에서는 UTC 시간을 사용하고 있고 프론트에서는 KST를 사용하기 때문에 두 화면의 차이가 발생하는 것이다.

그래서 서버에서 데이터를 가져올 때 UTC 시간을 KST 시간으로 통일시켜줌으로써 해결했다.

import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";

dayjs.extend(utc);
dayjs.extend(timezone);

...

export const getServerSideProps = async () => {
...
  items.forEach((item) => {
    item.createdAt = dayjs(page.createdAt)
        .tz("Asia/Seoul")
        .format("YYYY-MM-DD");
  })
});

이 외에 날짜를 클라이언트 사이드에서만 처리해주는 경우도 있다.