[TIL] Next.js 환경변수(.env)_ 클라이언트 방향

이나현·2021년 11월 16일
0

Next.js

목록 보기
2/2


Next.js 초기세팅 이후 로그인/회원가입 페이지 마이그레이션을 하고 있는데 통신이 안되는 문제가 있었다...🥲

console.log를 찍고 찾아보니, process.env.~~에서 undefined가 뜨며 통신이 제대로 되고 있지 않는다는 것을 알 수 있었다..!

env 환경변수 속 내용이 안 불러져 있을까 확인을 해보던 중 두가지 솔루션으로 해결할 수 있었다.

해당 내용은 next.js 공식문서를 참고해서 작성하였습니다.

기초

next.js는 자체적으로 환경변수에 접근 가능하기 때문에 dotenv와 같은 라이브러리를 설치할 필요가 없다!

오히려 설치 시, 에러메세지를 확인할 수 있습니다.

1. .env.local 파일명

공식 문서에서 나와있는 바로는, 환경변수 파일명을 .env.local로 설정하라고 한다.

그 이유는 아래의 내용에서 확인해 볼 수 있다.

.env.local - Local variable overrides for all environments

.env.local 파일은 모든 환경에서 상속할 수 있다. 즉, production 이든 development 든 관계없이 쉽게 접근가능하기 때문에 .env.local 파일명을 사용하라고 하는 것이다.

2. NEXT_PUBLIC 변수명

next.js는 결국 node.js 기반이기 때문에 node.js에서 사용가능한 변수명만 사용가능하다.

NEXT_PUBLIC 변수가 브라우저에서 볼 수 있는 변수이고, process.env.NEXT_PUBLIC_ANALYTICS_ID 이런식으로 사용한다면 node 기반 환경에서는 자동적으로 로드된다.

3. yarn build > yarn dev

그리고 .env.local파일은 자동으로 build되지 않기 때문에 build를 명령어에 입력후 빌드한 뒤 dev로 화면을 출력해봐야 한다.

정말 간단한 내용이지만.. 공식문서를 자세히 봐야 해결할 수 있는 문제였다!
마이그레이션 중 next.js에 대해 많이 공부하는 중이다:) 파이팅!!

profile
technology blog

0개의 댓글