문제

기존의 vue cli 프로젝트에서는 환경변수 세팅을 vue-cli-service의 --mode라는 값으로 간편하게 지정할 수 있었다.

"scripts": {
	"development": "vue-cli-service serve --mode development",
	"production": "vue-cli-service serve --mode production",
} 

혹은 nuxt프로젝트에서도 cross-env package를 통해 어렵지않게 설정할 수 있었다.

"scripts": {
    "development": "cross-env NODE_ENV=development nuxt",
	"production": "cross-env NODE_ENV=production nuxt",
}

위의 Vue, Nuxt프로젝트와 비슷하게 NODE_ENV값을 주입하여 환경변수를 세팅하는 형태는 Next프로젝트에서는 레퍼런스가 많이 없고, 터미널에서 NODE_ENV값을 직접 주입하지 말라는 경고가 발생했다.

---

해결

1. env-cmd 설치
   $ yarn add env-cmd

2. 원하는 환경변수 파일을 생성한다

//	.env.dev
NEXT_PUBLIC_MODE=dev

//	.env.production
NEXT_PUBLIC_MODE=production

3. package.json파일의 script를 상황에 맞게 수정한다

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

console.log('process.', process.env.NODE_ENV)	//	<- development
console.log('NEXT_MODE.', process.env.NEXT_PUBLIC_MODE)	//	<- staging

여기서 기존 Vue, Nuxt프로젝트에서 env.NODE_ENV값 자체를 development, production값으로 빌드시에 변경하는 방법과 달리, Next프로젝트에서는 env.NODE_ENV값을 변경하지 않고 어떤 .env.{환경} 파일을 설정할건지 빌드시 결정하는 차이가 있었다.