Next.js에서 환경 변수 사용하기

　프로젝트를 개발하다 보면 API의 기본 URL이라든지, API key라든지 환경 변수를 정의하여 사용할 일이 많을 것이다. 이번 글에서는 Next.js 환경에서 환경 변수를 사용하는 방법에 대해 고찰해보고자 한다.

🔎 공식 문서 톺아보기

　Next.js 환경을 초기 설정하면 프로젝트 최상위 경로에 .env라는 파일이 하나 생성된다. 기본적으로는 이 파일 안에 변수 이름=값의 형태로 환경 변수를 정의하여 사용하면 된다. 정말 간단해 보이지만, 이 방법대로는 브라우저 환경에서 환경 변수를 읽어들일 수 없다. 왜냐하면 기본적으로 .env 파일 안의 환경 변수는 Node.js 환경에서만 참조가 가능하도록 되어 있기 때문이다. 그렇다면 브라우저 환경에서도 환경 변수를 참조하도록 하려면 어떻게 해야 할까? 이에 관한 내용을 공식 문서에서 발췌해보면 다음과 같다.

Bundling Environment Variables for the Browser

Non-NEXT_PUBLIC_ environment variables are only available in the Node.js environment, meaning they aren't accessible to the browser (the client runs in a different environment).
In order to make the value of an environment variable accessible in the browser, Next.js can "inline" a value, at build time, into the js bundle that is delivered to the client, replacing all references to process.env.[variable] with a hard-coded value. To tell it to do this, you just have to prefix the variable with NEXT_PUBLIC_.

　내용은 길지만 결론은 브라우저 환경에서도 참조가 가능한 환경 변수를 정의하려면 환경 변수 이름에 접두사로 NEXT_PUBLIC_을 붙여줘야 한다는 것이다.

💡 실제로 적용해보자!

　공식 문서에 따르면 이렇게 NEXT_PUBLIC_ 접두사가 붙은 환경 변수는 빌드 시에 환경 변수를 참조하는 JavaScript 코드의 값을 대체하여 빌드된다고 한다. 다만 주의할 점이 있다면 빌드된 후에는 환경 변수의 값에 접근하거나 변경하는 것이 불가능하다. 모든 NEXT_PUBLIC_ 접두사가 붙은 환경 변수는 빌드 시의 값으로 고정되기 때문에, 런타임 도중에 환경 변수에 접근해야 할 일이 있다면 Next.js 13 버전의 App Router 방식을 사용하거나 Next.js 12버전의 getServerSideProps 메서드를 사용할 필요가 있다고 한다.

　정의한 환경 변수는 위와 같이 process.env.환경 변수 이름과 같은 방식으로 참조하여 사용하면 된다.

🙏 참고 문헌

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