Next.js 환경변수

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

1. process.env.NODE_ENV : 구동환경 체크용 환경변수
2. .env 파일 : 구동 환경별 환경변수 적용 파일
3. NEXT_PUBLIC_ : 브라우저에서 참조하기 위한 Prefix

 

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 값에 따라 개발자툴 활성화 여부를 설정한다.

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

 

env 파일

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

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

  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 파일 : 가장 우선순위가 높다. 다른 파일들에 정의된 값들을 모두 덮어쓴다.(오버라이드)

 

NEXT_PUBLIC_ 

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

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

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

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

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

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

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://curryyou.tistory.com/503