NextJs Environment Variable (환경변수) 설정하기

NextJs Environmnet Variable

NextJs에선 .env.local을 통해 로드 된 모든 환경변수를 사용할 수 있다.

.env.local

DB_HOST=localhost
DB_USER=root
DB_PASS=1234

위와 같이 설정하고 사용하려는데 계속 undefined가 표시되더라 그래서 NextJS 공식 문서를 다시 살펴보니 기본적으로 환경 변수는 Node.js 환경에서만 사용 가능이라 되어있더라, 그래서 getStaticProps 같이 브라우저 렌더링 전에 로드하는건 되고, jsx에서 가져오려니 안되는 것이였다.

방법은 변수에 NEXT_PUBLIC_접두사를 붙여주면 브라우저 Javascript에 인라인되어 사용할 수 있다.

.env.loca (수정 후)

NEXT_PUBLIC_DB_HOST=localhost
NEXT_PUBLIC_DB_USER=root
NEXT_PUBLIC_DB_PASS=1234