[Next.js] Next에서 환경 변수 사용하기

process.env.로 환경변수를 불러올 때 undefined가 뜨는 문제

기본적으로 Next의 환경변수는 node 환경의 서버사이드에서만 불러올 수 있다고 한다.

해결법으로는 환경변수 이름 앞에 NEXT_PUBLIC_을 붙여주면 브라우저 환경에서도

환경변수를 읽을 수 있다

 

env.local과 env.production

build 명령어를 사용하면 env.production 파일이 우선적으로 적용된다.

따라서 env.local에는 NEXT_PUBLIC_BASE_URL에 로컬호스트 주소를 넣어주고, env.production에는 배포 주소를 넣어주면 빌드, 배포시 env.production의 NEXT_PUBLIC_BASE_URL을 읽어 배포주소를 베이스 주소로 사용하게 된다.