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

2025. 1. 14. 09:27· REACT & NEXT
목차
  1. env-cmd를 활용하여 편하게 관리하기
  2. 환경 별 파일 생성하는 방식
  3. 하나의 파일 안에서 관리하는 방식 (.env_cmdrc)

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"
    }

'REACT & NEXT' 카테고리의 다른 글

[React] css module 사용하기  (1) 2024.08.27
[Next] CSR, SSR, SSG 의 차이  (0) 2024.08.16
[Next] next/image  (0) 2024.05.31
[Next] 폰트 변경  (0) 2024.05.08
[Next]Next.js + TypeScript 시작하기  (1) 2024.03.26
  1. env-cmd를 활용하여 편하게 관리하기
  2. 환경 별 파일 생성하는 방식
  3. 하나의 파일 안에서 관리하는 방식 (.env_cmdrc)
'REACT & NEXT' 카테고리의 다른 글
  • [React] css module 사용하기
  • [Next] CSR, SSR, SSG 의 차이
  • [Next] next/image
  • [Next] 폰트 변경
seominki
seominki
seominki
minki's blog
seominki
전체
오늘
어제
  • LIST (44)
    • JAVASCRIPT (11)
    • TYPESCRIPT (7)
    • REACT & NEXT (6)
    • VUE (8)
    • WEBPACK (3)
    • FIREBASE (1)
    • LINUX (1)
    • GIT (2)
    • 자료구조 & 알고리즘 (2)
    • CS (0)
    • HTML&CSS (1)
    • AWS (2)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

인기 글

최근 글

hELLO · Designed By 정상우.v4.2.2
seominki
[Next] 환경 변수 사용하기 (.env)
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.