[NextJS] .evn(환경 변수) 사용 방법

 

EVN 란?
개발자만 알아야 하는 민감한 정보(Port, DB, API KEY 등)나 Git, 오픈소스에 올리면 안 되는 값들이 있다.
이때 환경변수 파일을 외부에 만들어 저장시켜 소스코드 내에 하드 코딩하지 않고 사용할 수 있다.

 

 

1. EVN 파일 사용 방법

1-1) 최상위 경로(root)에서 .evn 파일 생성

.env 경로

env 파일 내용

• 환경 변수로 지정할 값 작성
• 리액트(create-react-app)일 경우 변수명 REACT_APP_으로 시작한다. ( ex) REACT_APP_API_KEY  )
• NextJS의 경우 NEXT_PUBLIC_으로 시작한다.

 

1-2) .gitignore 설정 추가

.gitignore 수정

• .evn파일을 등록해주어야 Git에 Push 할 때, 파일이 올라가지 않는다.

 

1-3) 환경 변수 사용

const API_KEY = process.env.NEXT_PUBLIC_API_KEY;