[Next.JS] Application error: a client-side exception has occurred (see the brows

클라이언트 측에서 예외처리를 제대로 안 해서 생기는 에러

Application error: a client-side exception has occurred (see the browser console for more information).

 

 vercel 에 배포 시 위 에러가 뜬다면, 90% 이상은 서버로 부터 클라이언트 측 렌더링에 필요한 데이터를 제대로 받아오지 못해서 생기는 문제이다.  그리고 해당 에러가 뜨는 근본적인 이유는  클라이언트 측에서 예외 처리를 제대로 안 해서 생긴다.
 
따라서  위 문제를 해결하기 위해서는 해당 데이터를 사용하는 로직을 찾은 후 데이터가 정상적으로 서버로 부터 받아온 직후에 데이터를 사용할 수 있도록  if(!data) return <p>데이터를 조회중입니다..</p> 와 같은 이른 반환 패턴을 활용해서 사전에 에러가 뜨는 것을 방지하면 된다. 

 

물론 이 방법은 본인의 방법이고, 더 좋은 방법이 있고, 그게 현재 상황에 맞다면 그 방법을 고려하여 적용하는 것이 옳다. 

 
 

더 다양한 해결방법을 확인하고자 한다면

https://stackoverflow.com/questions/72607999/next-js-application-error-a-client-side-exception-has-occurred-see-the-browser

Next.js Application error: a client-side exception has occurred (see the browser console for more information)