Nextjs 환경 변수 (environment variable)를 server와 client에 모두 적용하는 방법

일반적인 환경 변수 적용 (only server)

nextjs에서 환경 변수 (environment variable)를 적용 시 프로젝트 root 경로에 ".env.local" 파일을 만들고 필요한 변수들을 아래처럼 선언해주면 된다.

IS_DEV=1

이 경우 process.env.IS_DEV라는 값을 참조 시 1이라는 값을 얻을 수 있다.

 

하지만, getStaticProps나 getServersideProps와 같이 server단에서 호출되는 함수에서는 process.end.IS_DEV는 1인데, client단에서는 undefined가 된다.

 

이는 서버 상의 환경 변수를 보안상의 이유로 외부에 노출하지 않기 때문이다.

 

 

Server와 client 모두에 적용되는 환경 변수 (server+client)

만약 server와 client단에서 모두 사용가능한 환경 변수를 구현하기 위해서는 IS_DEV 앞에 "NEXT_PUBLIC_"을 붙여주면 된다.

NEXT_PUBLIC_IS_DEV=1

그럼 process.env.NEXT_PUBLIC_IS_DEV는 서버와 클라이언트에서 모두 1이라는 같은 값을 가지게 된다.