React - Next.js environment variable 설정하기(.env files)

next js에서 .env 파일들을 설정 하고나서, 개발(dev) 환경과 배포(production)에 따라서 읽는 파일 설정을 하려고 한다.

 

# object

   - next js env files 설정하기

 

## env file 설정

   - next js에는 기본적으로 NODE_ENV 값에 따라 설정 값에 따라서 env 파일을 읽어온다.

   - 기본적으로 .env.local .env.development .env.production 파일 경로가 설정 되어있다.

   - npm run dev는 next dev가 실행되면서 .env.development 파일을

   - npm run start는 next start가 실행되면서 .env.production 파일을... scripts에 따라서 읽어온다.

   - default 값은 .env.local 파일이며, .env.development 파일이 없으면 .env.local 파일이 읽는다.

   - dev, start 명령어를 할 때, 항상 먼저 .env.local 값을 읽어 오고 dev나 start에 따라서 .env.${NODE_ENV} 파일을 override 시킨다.

 

.env 파일들을 설정하고, npm run dev를 실행을 시키면 .env.development 파일을 읽어온다.

 

## npm run dev

 

배포를 하게 된다면, npm run build를 하게 되고 build 할때 로그를 살펴보면 .env.production 파일을 읽어서 build를 한다.

 

## npm run build

 

그리고 나서 npm run start를 하면 .env.production 파일을 읽어서 실행된다.

## npm run start

 

위와 같이 파일을 .env.development  .env.production 파일을 설정해서 개발 환경과 배포 환경을 구별해서 사용이 가능하다.

 

 

### 참조

https://nextjs.org/docs/basic-features/environment-variables#environment-variable-load-order

Basic Features: Environment Variables | Next.js