Next.js에서 .env 변수 사용하기

axios 모듈화를 위해 .env 파일을 생성하고 api.ts파일에서 process.env.BASE_URL 형태로 참조를 시도했다. 그런데 이게 웬걸,

자꾸 localhost:3000 으로 뜨는 것이 아닌가. 혹시나 변수명이 문제인건가 해서 변수명을 바꿔봐도 전혀 참조가 안 되는 것이었다. 직접 url를 입력해서 하는 건 문제가 없는데, .env의 값을 참조를 못 하고 있었다.

이유를 찾아보려고 열심히 구글링을 한 결과, next에서는 환경 변수를 브라우저에게도 참조시키기 위해서는 NEXT_PUBLIC_ 을 앞에 붙여주여야 한다!!

참고 링크 : https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables