next.js 136 [error] Hydration failed because the initial UI does not match what was rendered on the server Next.js 13.2.4 버전에서 개발 중, yarn dev 로 실행하여 캐러셀 컴포넌트를 클릭 시 발생한 에러 에러 원인 배포 전, yarn dev 로 next.js 웹 어플리케이션을 실행 후, 링크에 연결 후 빠르게 캐러셀에 클릭 등 유저 이벤트 발생 시 해당 에러 발생 해결 방법 해당 에러는 개발 중인 페이지를 yarn dev 로 실행 시, 빌드 하지 않고 ssr 이나 csr로 랜더링 되는 next.js 의 특성 상 발생하는 에러이다. yarn dev로 실행 시, 빌드되지 않은채로 ssr이나 csr 로 랜더링 된다. 이때 pre-rendering 된 요소에 hydration 이 완료되기 전에 접근하게 되면 해당 에러가 발생한다. 빌드 후 배포 시에는 pre-rendering과 hydration 사.. 2023. 2. 28. Next.js 13 에는 아직 css-in-js 를 사용하긴 이른 것 같다 처음에는 css framewok로 mui(Material UI) 사용을 생각했으므로, mui에 맞게 emotion css 를 사용해보려 했으나... 듣도 보도 못한 에러가 나와서 당황하던 중... 공식 문서를 찾아보니 그렇다... emotion 과 mui는 아직 미지원 상태여서 에러가 났던거였다... 음, 그럼 스타일드 컴포넌트로 해야겠다! 나도 하던거 하면 편하니까! 근데 안되네... ssr 로 만들어야 할 레이아웃의 서버 컴포넌트를 "use client"로 클라이언트 컴포넌트로 선언해서 csr 로 해야만 에러가 나지 않더라... 해당 페이지의 csr은 내가 원하는 것이 아니었다 한참을 방법을 찾던 중, next js 13 공식 문서에서 답을 찾았지만, 설정 방법 대로 하던 중, 아래와 같은 에러 발생.. 2023. 2. 22. 이전 1 2 다음
