Next.js - dotenv로 환경변수 저장하기

✅ 사이드프로젝트를 하면서 발생했던 이슈에 대해서 정리합니다.

 

• Next.js 환경에서 dotenv로 환경변수 저장하는 법

---

📌 dotenv

• dotenv 라이브러리는 .env 파일로부터 환경 변수를 읽을 수 있습니다. 따라서 .env 파일에 키=값 포멧으로 나열하고 dotenv 라이브러리를 이용해서 process.env 에 설정할 수 있습니다.
• 디폴트로 현재 디렉토리에 위치한 .env 파일을 읽어옵니다.
• 만약 .env가 다른 경로에 있다면, config() 함수 호출 시 path 옵션을 넘겨주면 됩니다.

 

◼ 설치

npm i dotenv

 

◼ 사용예시

• 저는 Next.js 에서 사용했습니다.

config 폴더

// .env.development
MODE= DEV


// .env.production
MODE= PROD

package.json

// scripts 부분

"scripts": {
	...
    "build:dev": "NEXT_NODE_ENV=development next build",
    "build:prod": "NEXT_NODE_ENV=production next build",
    "start:dev": "NEXT_NODE_ENV=development next start -p 8080",
    "start:prod": "NEXT_NODE_ENV=production next start -p 8080"
  },

next.config.js

require("dotenv").config({
  path: `./config/.env.development`,
});

module.exports = {
  reactStrictMode: false, // env와 무관
  swcMinify: true, // env와 무관

  env: {
    MODE: process.env.MODE,
  },
};

 

◼ 결과

• npm run build:dev => npm run start:dev 실행 시 process.env.MODE 값에 DEV 값이 담깁니다!
• npm run build:prod => npm run build:prod 실행 시 process.env.MODE 값에 PROD 값이 담깁니다!