NextJS 환경 변수 지정하기 (+빌드)

요즘 NextJS로 프로젝트를 진행하고 있다.
여태껏 Vue로만 프로젝트를 해왔던터라 리액트에 적응하기 바쁘다.

운 좋게 배포.. 를 하게 됐는데 도메인과 포트 번호를 다르게 지정해줘야 하는 상황이 생겼다.

관련해서 찾아보니까 환경 변수를 지정해주면 되더라

그래서 NextJS의 환경 변수에 대해 찾아보았다.
NextJS 공식 레포에서 환경 변수와 관련된 예제들이 있었다.

NextJS의 환경 변수는 총 세 가지로 크게 나눌 수 있다.
1. .env (모든 환경)
2. .env.development (development 환경) - npm run dev로 실행 시
3. .env.production (production 환경) -
build 후 npm run start로 실행 시

단순 개발 시와 빌드 시 사용 할 도메인과 포트 번호를 나누어서 각각 환경 변수로 지정해주었다.

// .env.development
NEXT_PUBLIC_ENV_HOST=http://localhost
NEXT_PUBLIC_ENV_PORT=8089

// .env.production
NEXT_PUBLIC_ENV_HOST=(배포 url)
NEXT_PUBLIC_ENV_PORT=8080

이렇게 지정한 환경 변수는 아래처럼 사용할 수 있다.

// pages/api/index.js

const HOST = process.env.NEXT_PUBLIC_ENV_HOST
const PORT = process.env.NEXT_PUBLIC_ENV_PORT
const BASE_URL = `${HOST}:${PORT}`

const url = axios.create({
    baseURL: BASE_URL,
    headers: {
        "Content-Type": `application/json;charset=UTF-8`,
        "Access-Control-Allow-Origin": "*",
        "Accept": "application/json"
    }
});

package.json에 build:local 명령어를 추가해준다.

// package.json

"scripts": {
  "dev": "next dev",
   // 배포하기 전 로컬에서 개발

  "build": "next build && next export",
   // 배포를 위한 빌드

  "build:local": "dotenv -e .env.development next build && next export",
  // 로컬 환경에서 빌드 테스트

  // 라이브러리를 이용해서 npm run build:local 명령어 실행 시 
  // .env.development 환경 변수를 사용하도록 해줌
  "start": "next start",
  "lint": "next lint"
}

정리

1. npm run build → npm start : 실서버에 배포를 하기 위한 빌드
   host: (배포 도메인) / port: 8080

2. npm run build:local → npm start : 로컬에서 테스트를 하기 위한 빌드
   host: http://localhost / port: 8089