next.js / react 환경 변수(env) 적용 방법

next.js 환경 / react 환경에서의 환경 변수를 적용하는 방식은 대동소이한데, 

같은 점은 앞에 각 환경에 따라 약속된 접두사를 붙여야 한다는 점이며,

다른 점은 next.js 의 경우 NEXT_PUBLIC_ 을 접두사로, react의 경우 REACT_APP_을 접두사로 사용해야 한다는 점이다.

 

사용 방법 예시는 아래와 같다.

// .env

// next.js 환경
NEXT_PUBLIC_example=example

// react 환경
REACT_APP_example=example

해당 접두사를 정상적으로 입력하지 않았을 경우, undefined로 나타나게 된다.

(node.js나 nest.js의 경우에는 위와 같은 규칙이 없었어서, 처음 next.js 환경에서 환경변수를 사용할 때 적용이 되지 않아 고생했더랬다.)

 

물론, env를 정상적으로 사용하기 위해서는, env 파일 수정 후 새로 서버를 재시작하는 과정이 필요하다.

 

콘솔에 정상적으로 찍히는 모습.