Next js 환경파일 설정하기

보통 프로젝트를 진행할때, 사용되는 api key나 path들을 환경파일에 따로 뽑아서 관리를 하는데

개발용과 실서버용의 .env파일을 따로 두고 개발 환경에 따라 env 값을 다르게 받아올 수 있다.

이를 위해 env-cmd 패키지를 이용해서 스크립트에 따라 따로 환경파일이 로드되도록 설정해보자

먼저 env-cmd 설치~!

npm i env-cmd

• https://www.npmjs.com/package/env-cmd

[설치 후]

development / production
env file 따로 생성

[development.env]

NEXT_PUBLIC_TEST=development

[production.env]

NEXT_PUBLIC_TEST=production

[package.json에 스크립트 설정]

package.json 
{
  "name": "test_app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build:dev": "env-cmd -f ./env/delvopment.env next build",
    "build:production": "env-cmd -f ./env/production.env next build",
    "start:dev": "env-cmd -f ./env/development.env next start",
    "start:production": "env-cmd -f ./env/production.env next start"
  },
  "dependencies": {
    "dotenv": "^9.0.1",
    "next": "10.2.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "sass": "^1.32.12"
  }
}

[설정 확인]

[_app.js]

import '../styles/globals.scss'

function MyApp({ Component, pageProps }) {
  //환경 파일 잘 로드되나 app에 찍어보기
    console.log(process.env.NEXT_PUBLIC_TEST);
    return <Component {...pageProps} />
}

export default MyApp

build 후,

[npm run start:dev]으로 실행했을 때,
development

[npm run start:production]
production

잘 찍히는거 확인 완료