[환경변수설정] Next + React , Vue 에서 env 파일 설정시 주의해야 할 점/ undefined

최근 여러가지 개발을 진행하다보면서 여러가지 개발환경에 접근하게 됐다.

 

예를들어 Next 기반의 React 라던가 Vue 환경이라던가.

 

사실 회사에서 프로젝트를 하면서 얻게 된 상식 중 하나가

Vue 에서는 환경변수명 접두사에 꼭 VUE_APP 을 붙여줘야한다는 사실이였다.

 

✔️  Vue 환경변수 설정

접두사에 꼭 VUE_APP 을 붙여줘야한다는 사실이였다.

VUE_APP_API_URL= "url"

 

 

그리고 이번 사이드 프로젝트에 들어가면서 Next 기반으로 작업해 나가는데 계속해서 환경변수가 읽히지 않는 현상이 일어났다.

 

보통 env 키를 확인하려면 콘솔에 process.env.{API키명} 을 붙여주면 서버가 콘솔에 찍힌다.

 

근데 계속해서 undefined 가 표시됐다.

 

 

✔️ .env 를 확인할때

process.env.API_KEY

이때 Vue 환경에서 변수를 읽히려면 VUE_APP 을 붙여주었다느 사실을 생각하고. NEXT 에도 그런 제한이 있는지 찾아봤다.

 

기존에는 config 파일 안에서 설정으로 변수를 넣어주었는데, 최신 버전은 .env 파일 내에 NEXT\_PUBLIC 이라는 접두사가 들어있어야 제대로 읽혀졌다.

 

 

 

✔️ NEXT_PUBLIC 붙여주기

NEXT_PUBLIC_API_NAME = "url"

 

 

 

✔️ 위 해결방안이 절대적인건 아니다!!

다른 참고글에 따르면 config 설정으로 변수를 로드하는것이 더 효율적이라는 의견이 있다.

 

 

👉 참고글

 

NextJS에서 환경 변수(.env)를 사용하는 방법은 무엇입니까?