[Next.js] 환경변수 사용 방법: .env파일 (development, production, local)

# Next.js  환경변수(Environment Variables) 사용 방법

Next.js는 아래의 3가지 방식으로 환경변수 기능을 지원한다.

 

1. process.env.NODE_ENV : 구동환경 체크용 환경변수

2. .env 파일 : 구동 환경별 환경변수 적용 파일

3. NEXT_PUBLIC_ : 브라우저에서 참조하기 위한 Prefix

 

각각의 기본적인 사용법을 정리해 본다.

---

1. process.env.NODE_ENV : 구동환경 체크 변수

- Next.js는 자동으로 process.env.NODE_ENV 변수를 생성하고, 구동 환경에 따라 아래의 3가지 값을 주입해 준다.

  1) development : 개발 환경(npm run dev로 구동한 경우)

  2) production : 배포 환경(npm run build로 빌드한 경우)

  3) test : 테스트 환경 

 

- process.env.NODE_ENV는 서버와 브라우저에서 모두 참조할 수 있다.

- 주로 개발자 도구, 디버그/로그, 미들웨어 등을 설정할 때  사용한다.

// 아래코드는 process.env.NODE_ENV 값에 따라 개발자툴 활성화 여부를 설정한다.

const store = configureStore({
  reducer: {
    counter: couterSlice.reducer,
    number: numberSlice.reducer
  },
  // 개발모드일 때만 리덕스 개발자도구를 사용하도록 설정
  devTools: process.env.NODE_ENV === 'development'
});

 

 

2. .env 파일 : 환경변수 정의 파일

- 개발자가 직접 필요한 환경변수를 정의하는 파일이다.

- 루트 경로에 아래의 파일들을 생성해두면, 구동 환경에 맞는 파일이 적용된다.

300

  1) .env 파일 : 모든 환경에서 공통적으로 적용할 디폴트 환경변수를 정의한다. 가장 우선순위가 낮다.

  2) .env.development 파일: 개발 환경(process.env.NODE_ENV === 'development') 에서 적용된다.

  3) .env.production 파일: 배포/빌드 환경(process.env.NODE_ENV === 'production') 에서 적용된다.

  4) .env.test 파일: 테스트 환경(process.env.NODE_ENV === 'test') 에서 적용된다.

  5) .env.local 파일 : 가장 우선순위가 높다. 다른 파일들에 정의된 값들을 모두 덮어쓴다.(오버라이드)

 

###### .env 파일
# 가장 우선순위가 낮다. 모든 환경에서 공통으로 사용할 디폴트 키를 관리한다.
NEXT_PUBLIC_ANALYTICS_ID=default_analytics_id
NEXT_PUBLIC_API_KEY=default_api_key
NODE_VALUE=default_value  


###### .env.development 파일
# 개발환경(process.env.NODE_ENV === 'development')에서 사용할 키를 등록한다. 
# 개발환경일 경우, .env에 같은 환경변수가 있다면 덮어쓴다.
NEXT_PUBLIC_API_KEY=dev_api_key
NODE_VALUE=dev_value


###### .env.production 파일
# 배포/빌드환경(process.env.NODE_ENV === 'production')에서 사용할 키를 등록한다. 
# 배포환경일 경우, .env에 같은 환경변수가 있다면 덮어쓴다.
NEXT_PUBLIC_API_KEY=prod_api_key
NODE_VALUE=prod_value


###### .env.local 파일
# 모든 환경에서 최우선순위로 적용할 환경변수를 정의한다.
# 모든 .env.* 파일보다 우선순위가 높다.(같은 환경변수가 있다면 모두 덮어쓴다.)
NEXT_PUBLIC_API_KEY=local_api_key
NODE_VALUE=local_value

 

 

3. NEXT_PUBLIC_ : 브라우저 참조용 Prefix

- 기본적으로 환경변수는 서버에서만 참조할 수 있다.

- 서버와 브라우저 모두에서 환경변수를 사용하려면, 변수명 앞에 "NEXT_PUBLIC_" 을 붙여줘야 하다.

 

- 환경변수 생성시, "NEXT_PUBLIC_변수명" 형태로 생성한다.

### .env 파일
# 서버에서만 사용 가능(getServerSideProps, getStaticProps 등)
NODE_VALUE=default_value  

# 서버와 브라우저 모두 사용 가능 (앞에 NEXT_PUBLIC_를 붙여서 생성한다)
NEXT_PUBLIC_API_KEY=default_api_key

 

- 환경변수를 참조할 때도 "NEXT_PUBLIC_변수명" 으로 사용한다.

import type { GetServerSideProps, NextPage } from 'next';

// ### 브라우저 실행 환경(리액트 컴포넌트)
const Home: NextPage = () => {
  // NEXT_PUBLIC_이 없는 변수는 브라우저에서 참조할 수 없다.
  console.log(process.env.NODE_VALUE); // undefined
  
  // NEXT_PUBLIC_이 앞에 붙은 변수는 브라우저에서도 참조할 수 있다.
  console.log(process.env.NEXT_PUBLIC_API_KEY); //default_api_key
  
  return (
    <>
      <main>index</main>
    </>
  );
};


// ### 서버 실행 환경 (SSR)
export const getServerSideProps: GetServerSideProps = async (context) => {
  // 서버에서는 모든 환경변수를 참조할 수 있다.
  console.log(process.env.NODE_VALUE); // default_value
  console.log(process.env.NEXT_PUBLIC_API_KEY); // default_api_key
  
  return { props: { message: `Next.js is awesome` } };
};

export default Home;

---

더 상세한 내용은 아래 공식문서를 참조하자.

https://nextjs.org/docs/basic-features/environment-variables