[Next.js] 환경변수 오류

🙀문제점

👉문제 내용

Next.js에서 환경변수를 설정해서 사용하던 도중에 오류가 발생했습니다.

EmailJs의 service ID를 환경변수로 사용하고 있는데 자꾸 service ID가 없다고 떴습니다.

혹시 환경변수에서 값을 못가져오나 싶어서 환경변수 값을 console로 찍어봤더니 undefined가 떴습니다.

따라서 service ID의 문제가 아니고 환경변수를 불러오는데에 문제가 있음을 발견했습니다.

 

👉문제 원인

이전에는 환경변수를 Node.js 환경에서 사용했기 때문에 변수명을 맘대로 지어도 문제가 없었지만,

이번에는 환경변수를 브라우저에서 사용하려고 했기 때문에 문제가 발생한 것이었습니다.

 

---

✨해결 방법

환경변수의 이름을 정할 때 이름 앞에 NEXT_PUBLIC_을 붙여주면 해결됩니다.

 

👉기존 환경변수 이름

EMAILJS_SERVICE_ID = " "

 

👉변경한 환경변수 이름

NEXT_PUBLIC_EMAILJS_SERVICE_ID = " "

 

즉, 브라우저에서 환경변수의 값에 액세스할 수 있도록 하기 위해서는 NEXT_PUBLIC_을 붙여줘야합니다!