Next.js 개발 환경 변경하기

개발 환경에 따라 API 엔드포인트들이 변화될 수 도 있어 이에 따라 환경분리가 필요하다.

.env 파일

Next.js는 .env 파일을 가지고 분리를 한다.
NEXT_PUBLIC_XX이라는 Prefix를 가지면 클라이언트 쪽에 환경이 공유된다.

• *.env.development : next dev의 기본값
• *.env.local : 우선순위가 가장 낮은 환경설정
• .env.production : next build의 기본값

예시 ) API 주소를 분리

# .env.local
NEXT_PUBLIC_API_BASE_URL=http://localhost:8080/api

# .env.development
NEXT_PUBLIC_API_BASE_URL=http://192.168.0.1:8080/api

# .env.production
NEXT_PUBLIC_API_BASE_URL=http://192.168.0.2:8080/api

config.ts 파일을 만들어 생성하여 통합 

export const globalConfig = {
  BASE_URL: process.env.NEXT_PUBLIC_API_BASE_URL,
};

통합 Axios

좀 더 편하게 주입해서 사용하기

env-cmd 라이브러리를 통해서 특정 파일을 주입할 수 있다.

npm i env-cmd

env-cmd -f 파일 명을 통해 주입

## package.json 
"dev:local" : "env-cmd -f .env.local next dev", #env.local를 주입받는다.