[Next.js] Vercel로 배포한 환경에 .env 환경 변수 등록하기

 

React + Next.js 기반의 프로젝트를 Vercel로 배포하려 하는데 개발 환경에서는. env가 잘 동작하지만

배포 시에는 Vercel이 이를 알지 못하고 github의. env파일도 읽지 못하기 때문에

따로 환경 변수의 Key와 값을 설정해 주어야 한다.

 

- .env :  특정 API의 키 값 및 환경을 설정할 세팅값을 KEY와 VALUE로 저장하게 되는 파일이다.

 

기본 React를 사용할 때 env의 key값을 설정할 때는 "REACT_APP_ " 이라는 네이밍 규칙이 존재하고

Next.js 환경일 때는 "NEXT_PUBLIC_" 이라는 네이밍 규칙이 존재한다.

 

등록 방법

현재 배포되어있는 Vercel의 프로젝트로 들어간다.

그 다음 Settings를 클릭한다.

 

아래로 조금 내리다보면 왼쪽에 Environment Variables를 클릭해준다.

 

Environment Variables 선택

 

그 이후 내가 .env 파일에 작성해 놓았던 환경 변수의 키값과 value 값을 작성하고 Save를 눌러준다.

 

 

 

그러면 하단에 등록이 된다.

등록 후 재 빌드후 푸시를 하면 내가 등록한 환경 변수를 사용할 수 있다.