브라우저에서 환경 변수 사용하기 In Next.js

💡브라우저단에서 환경 변수를 사용해 보자 !

env 파일에다가 NEXT_PUBLIC_XXX로 하면 된다고 하는데, 이상하게도 local에서 실행할때는 읽어오더니,

production로 실행하니, 브라우저에서 undefined 결과가 나왔다. (아예 못읽어오는것도 아니고 서버에서는 읽어오더라.. 😠)

 

많은 삽질 끝에 브라우저에서 환경변수를 적용한 방법을 남긴다!

 

💡publicRuntimeConfig를 사용한 환경 변수 선언💡

#next.config.js

...

module.exports = {
  publicRuntimeConfig : {
      PUBLIC_APPS_ENV : process.env.APPS_ENV
  },
  ...
}

이렇게 필요한 변수를 publicRuntimeConfig 안에다가 선언한다.

 

💡읽어오기

import getConfig from 'next/config';

const EnvComponent = () => {
  const { publicRuntimeConfig } = getConfig();

  if (!publicRuntimeConfig) return null;
  if (!publicRuntimeConfig.PUBLIC_APPS_ENV) return null;
  if (publicRuntimeConfig.PUBLIC_APPS_ENV === 'prod') return null;
  
  return (<div>~~~~</div>)
}

나의 경우 리얼 환경인지 아닌지 구분이 필요해서 이렇게 적용했다.

publicRuntimeConfig가 읽어오기도 전에 랜딩 될수 있어서 값 체크를 반드시 적용해줘야 한다.

다행히도 build때 이 사실을 알려줘서, 적용할 수 있었다.

 

 

+ 이때 반드시  getServerSideProps 와 같은 서버사이드 부분을 거쳐야 publicRuntimeConfig를 통해서 값을 받아 올 수 있다.