[Next] 환경 변수 사용하기 (.env)

env 파일

env 파일은 환경 변수를 정의하고 관리하기 위한 파일입니다. 개발 환경, 테스트 환경, 운영 환경 간의 설정값을 분리하여 사용합니다.

환경변수 작성법

API_URL=https://test.com
NEXT_PUBLIC_APP_NAME=DEV_APP

런타임 시에 값을 가져와야 할 경우는 NEXT_PUBILC_ 라고 시작해야 합니다.

Next.js에서 env 파일 우선 순위

1. .env.local
2. .env.[NODE_ENV].local
3. .env.[NODE_ENV]
4. .env

• [NODE_ENV]에 들어올 수 있는 값은 production, development, test 그 외에 staging 등등
• 만약 동일한 환경변수가 각 파일마다 있다고 가정했을 때 최종 .env.local 파일에 있는 환경변수로 덮어쓰여집니다.

실행 & 빌드 스크립트 수정

"scripts": {
    "dev": "NEXT_PUBLIC_APP_NAME=DEV_APP next dev",
    "stg": "NEXT_PUBLIC_APP_NAME=STG_APP next dev",
    "build:dev": "NEXT_PUBLIC_APP_NAME=DEV_APP next build",
    "build:prod": "NEXT_PUBLIC_APP_NAME=PROD_APP next build",
}

env-cmd를 활용하여 편하게 관리하기

패키지 설치를 먼저 합니다

npm install env-cmd

환경 별 파일 생성하는 방식

1. .env.[NODE_ENV] 파일 생성

2. 스크립트 수정

"scripts": {
    "dev": "env-cmd -f .env.development next dev",
    "stg": "env-cmd -f .env.staging next dev",
    "build:dev": "env-cmd -f .env.development next build",
    "build:prod": "env-cmd -f .env.production next build",
}

하나의 파일 안에서 관리하는 방식 (.env_cmdrc)

1. .env-cmdrc 파일 생성

   {
   "development": {
    "API_URL": "https://dev.api.com",
   },
   "staging": {
    "API_URL": "https://stg.api.com",
   },
   "production": {
    "API_URL": "https://prod.api.com",
   }
   }

2. 스크립트 수정

   "scripts": {
    "dev": "env-cmd -e development next dev",
    "stg": "env-cmd -e staging next dev",
    "prod": "env-cmd -e production next dev",
    "build:dev": "env-cmd -e development next build",
    "build:stg": "env-cmd -e staging next build",
    "build:prod": "env-cmd -e production next build",
    "start": "env-cmd -e production next start"
   }