[next.js]An error occurred in the Server Components render.

An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.

 

위의 에러가 발생했다.

 

해경방법

나의 경우에는 async로 data를 가져올때 로드전에 html에 데이터를 뿌려주면서 에러가 발생한것 같다.

dev환경에서는 에러가 없었지만, vercel에서 배포시에 에러가 발생했다.

 

해결방법은 fetch한 data가 null일 경우리 리턴 코드를 넣었다.

ex)

  if (!post)
    return (
      <div>
        <TopLayer location={location}></TopLayer>
        <Layout>
          <Left>
            <div className="mt-20 h-screen">
              <div className="animate-pulse">
                <div className="w-48 h-3.5 mb-4 bg-gray-300 dark:bg-gray-600"></div>
                <div className="mt-10 h-3 mb-3 bg-gray-200 dark:bg-gray-700"></div>
                <div className="h-3 mb-3 bg-gray-200 dark:bg-gray-700"></div>
                <div className="mt-10 h-3 mb-3 bg-gray-200 dark:bg-gray-700"></div>
                <div className="h-3 mb-3 bg-gray-200 dark:bg-gray-700"></div>
                <div className="h-3 mb-3 bg-gray-200 dark:bg-gray-700"></div>
              </div>
            </div>
          </Left>
          <Right></Right>
        </Layout>
      </div>
    );