[env-cmd] next.js에서 각 환경에 맞는 환경변수 설정하기

Pixabay로부터 입수된 Rama Krishna Karumanchi님의 이미지 입니다.

 개인 프로젝트를 개발할 때는 딱히 신경쓰지 않아도 될 수도 있지만, 실무에서는 개발 환경, QA 환경, 운영 환경등 각 환경마다 서버 주소나 변수들이 다른 경우가 많습니다. 그래서 각각 환경에 맞게 변수들을 등록해두고 환경에 맞게 변수가 자동적으로 적용되도록 해야합니다. 오늘은 env-cmd 패키지를 이용하여 환경변수를 설정해보겠습니다.

 

먼저, env-cmd를 설치합니다.

npm install env-cmd

or

yarn add env-cmd

 

설치를 했다면, 환경변수 파일을 생성합니다.

저는 아래와 같은 이름과 내용으로 두 개의 파일을 생성하겠습니다.

.env.dev

NEXT_PUBLIC_MODE=dev

.env.prod

NEXT_PUBLIC_MODE=prod

그리고 package.json 파일을 수정합니다.

{
    ...
    "script": {
        "dev": "env-cmd -f .env.dev next dev",
        "prod": "env-cmd -f .env.prod next dev",
        ...
    },
    ...
}

script.dev는 수정했고, script.prod는 추가했습니다.

 

그리고 코드 실행되는 부분에 아래 코드를 추가해서 npm run dev와 npm run prod 실행결과를 확인해봅니다.

cosole.log('mode', process.env.NEXT_PUBLIC_MODE);

 

npm run dev에서는 'mode dev'가 npm run prod에서는 'mode prod'가 출력된다면 정확하게 성공한것입니다.

 

참고:

 

env-cmd