13.2.42 [error] 'PostList' cannot be used as a JSX component. Its return type 'Promise<Element>' is not a valid JSX element async 서버 컴포넌트를 타 컴포넌트에서 사용 시, 해당 에러 발생 'PostList' cannot be used as a JSX component. Its return type 'Promise' is not a valid JSX element. Type 'Promise' is missing the following properties from type 'ReactElement': type, props, key 에러 원인 현재 Next.js 13.2.4 버전의 경우, async / await 서버 컴포넌트를 타 컴포넌트에서 사용 시, Promise 를 리턴하는데, 타입스크립트를 사용 중이라면 타입 에러가 발생한다. 해결 방법 해당 에러는 Next.js 팀이 타입스크립트 팀과 해결 중에 있으며, 이 문제.. 2023. 4. 29. [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. 이전 1 다음