[ Next / react-calendar] hydration errors (Feat. SSR)

react-calendar을 사용하는데 Next에서는 SSR이 진행되기 때문에 hydration errors가 발생할 수 있다.

현재 나도 발생했고 따라서 이부분에 대해서 언급해보려고 한다.

 

Situation

- Text content did not match. Server:

"July 2024" Client: "2024년 7월"
Error: Text content does not match server-rendered HTML. See more info here: https://nextjs.org/docs/messages/react-hydration-error

 

solution

-prop으로 locale을 추가

공문서 언급

Note: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client.

 

 

참조

1. https://www.npmjs.com/package/react-calendar

react-calendar

 

2. chat GPT