에러 상황 설명

전국재난톡을 개발을 하면서 나를 가장 괴롭게 했던 에러가 있었다.

Error: 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.

상황을 설명하자면, 로컬 서버에서는 아무 문제가 없었는데, 웹 서버에서 저런 에러가 뜨면서 데이터를 불러올 수 없었다.

결론부터 말하자면, 이건 배포 과정에서 문제가 생긴 것이라 볼 수 있다.
로컬 서버에서는 문제가 없었으니까!

(나는 처음에 이 문제가 내가 Next.js 13의 '실험적인' 기능인 server action을 사용해서 발생한 문제인 줄 알았다. 그런데 지금 생각해보니까 말도 안 되었다. 만약에 내 코드에 문제가 있다면 애초에 로컬 서버에서도 에러가 떴을 것이다.)

에러를 해결한 방법

에러가 발생한 이유는 바로 내가 vercel에서 배포할 때 환경 변수를 따로 설정을 안 해줬기 때문이었다.

우리는 환경 변수를 .env 파일에 설정해줬을 것이다.
그리고 보안을 위해 .gitignore에 .env를 넣었을 것이고.

그러면 vercel은 프로젝트를 배포할 때 당연히 혼란스러울 것이다.
자기는 환경 변수가 있다는 안내를 받지 못했는데 코드에는 환경 변수가 있으니까!

이제 프로젝트에 환경 변수를 설정해보자.

프로젝트 > Settings > Environment Variables로 들어가면 환경 변수를 설정해 줄 수 있다.

key에 환경변수 이름을 넣어주고 value에 값을 넣어주고 save해주자.
그리고 다시 deploy를 하자.

그러면 웹 서버에서도 정상적으로 작동하는 것을 볼 수 있다.