next.js Text content does not match server-rendered HTML. 에러 해결

_app.js 에 getInitialProps 사용했더니 요 에러가 갑자기 나는거;;
첨 보는 에러라.. 구글 검색!!! 

알고보니 서버에서 받아오는 데이터랑 client 에서 데이터랑 다르다 그니까 핸들링 해줘라 모 어쩌구 .. ㅎㅎ 요래서 나는 에러였슴

받아올 데이터 값을 state로 만들고
useEffect 안에서 state 값 변경하니 에러가 해결 되었다.

// before
const MsgList = () => (   
    <ul className="messages">
        {msgs.map(x => <MsgItem key={x.id} {...x}/>)} //msgs 가 서버에서 받아올 데이터
    </ul>
)
 
// after
const MsgList = () => {
    const [msgArr,setMsgArr] = useState() 
 
    useEffect(()=>{
        setMsgArr(msgs)// state에 데이터 저장
    },[])
 
    return(
    <ul className="messages">
        {msgArr?.map(x => <MsgItem key={x.id} {...x}/>)}
    </ul>    
    )
}

해결 출처:
https://stackoverflow.com/questions/66374123/warning-text-content-did-not-match-server-im-out-client-im-in-div