로컬, 개발, 프로덕션 환경에서 api 호출의 base url, 콜백 url 등의 기본값을 설정하려면 보통
.env 파일에 값을 넣어 사용하게 됩니다.
하지만 이러한 각각의 환경에 따라서 사용되는 base url 이 다르게 사용될것 입니다.
따라서 로컬, 개발, 프로덕션 환경에 맞는 환경 셋팅이 필요합니다.
next js 에서는 .env 파일의 값을 참조하려면 “proccess.env.NEXT_PUBLIC_” 이라는 접두사를 붙여야합니다. 또한 값에 접근할때 타입 추론이 불가능하다는 단점이 있었습니다.
이는 네이밍을 잘못 입력하여 에러를 찾는데 오래걸릴수도 있는 상황을 야기할수도 있습니다.
따라서 .env 파일은 각각의 환경을 구분하는 용도로만 사용하고, 나머지 값들은 ts파일들로 작성하여
값을 참조할 때 타입추론을 통해 편리하게 사용할수 있습니다.
먼저 프로젝트의 root에 .env 파일 3개를 생성합니다.
// .env.local
NEXT_PUBLIC_RUN_MODE=local
// .env.development
NEXT_PUBLIC_RUN_MODE=development
// .env.production
NEXT_PUBLIC_RUN_MODE=production