Nextjs hydrate 오류

이런 식으로 오류가 나온다.

lazyloading을 이용해서 해결하라는 소리도 있는데, 이걸 해결하는 가장 간단한 방법은
_app.tsx에 다음과 같이 코드를 작성하는 것이다.

...
 useEffect(() => {
    setIsSSR(false);
  }, []);

  return (
    <>
    {!isSSR && 
     <>
         내가 쓰려는 코드들...
     </>
    }
     </>
    )
...

 

reference

https://github.com/vercel/next.js/discussions/35773