[Next.js] NEXT_PUBLIC_ env undefined 해결하기

우선 Next.js 에서 env 를 사용할때 브라우저에서 사용하려면 NEXT_PUBLIC_ 접두사가 필요하다.

로컬 환경에서 .env 파일에 NEXT_PUBLIC_ env 를 설정하고 브라우저에서 사용할때는 문제가 없었다. 

docker, kubernates 환경에서는 계속 undefined로 나오는 문제가 있었다.

다른 env 는 문제가 없었고 NEXT_PUBLIC_ 인 경우만 undefined 로 나왔다. 

기존 설정에서는 deployment 에 env 로 설정했는데 여기서 문제가 있었다.

 

Next.js 공홈 문서에 보면 아래와 같은 글이 있다. 

https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables

Configuring: Environment Variables | Next.js

 

Note: After being built, your app will no longer respond to changes to these environment variables. For instance, if you use a Heroku pipeline to promote slugs built in one environment to another environment, or if you build and deploy a single Docker image to multiple environments, all NEXT_PUBLIC_ variables will be frozen with the value evaluated at build time, so these values need to be set appropriately when the project is built. If you need access to runtime environment values, you'll have to setup your own API to provide them to the client (either on demand or during initialization).

 

요약하면 NEXT_PUBLIC_ env 의 경우 앱을 빌드할때 주입되고 고정된다는 이야기이다. 

deployment env 는 빌드된 단일 도커 이미지를 배포할때 env 를 주입하기 때문에

NEXT_PUBLIC_ env 가 undefined 에러가 나왔던 것이다.

 

이 문제를 해결하려면 몇가지 방법이 있다.

1. Docker 이미지를 여러개 생성한다. 환경 변수가 달라지는 만큼 생성해야하는 단점이 있다. 

2. 서버에서 env를 클라이언트로 전달 한다.  

- 서버사이드 랜더링을 할경우 getServerSideProps, getInitialProps 를 사용해 전달

- 서버에 api 엔드포인트를 만들어서 env 값을 전달