Env variables are undefined in Next.js

Next.js를 이용해 작업하던 중, 브라우저에서 환경 변수로 설정한 값이 undefined로 읽히지 않으면서 이미지 서버에서 이미지를 불러오지 못하는 오류가 발생했다.

그 이유는 환경 변수는 서버 사이드에서만 동작한다. 그러므로 클라이언트 사이드, 즉 프론트엔드에서 환경 변수에 접근하기 위해서 이전 버전의 Next.js에서는 next.config.js 파일에서 다음과 같이 별도의 선언을 해 줄 필요가 있었다.

next.js environment variables are undefined (Next.js 10.0.5)

하지만 Next.js의 버전 업이 이루어지고, 위의 방법은 지금은 사용되지 않는 솔루션이다. 대신, 현재 Next.js(13.0)의 버전의 환경 변수 사용 가이드는 공식 문서에서 제공하고 있다.

Basic Features: Environment Variables | Next.js

간단하게 설명하면, .env.local 파일에 클라이언트 사이드에서 필요한 환경 변수를 NEXT_PUBLIC_VAR_NAME=“asdf”의 형태로 저장하고, process.env.NEXT_PUBLIC_VAR_NAME의 방식으로 호출할 것을 권하고 있다. 이와 같이 환경 변수를 설정한 후에, Next.js의 서버를 재시작하고, 클라이언트 사이드의 콘솔 로그에서 process.env.NEXT_PUBLIC_VAR_NAME을 확인해보면 정상적으로 동작하는 것을 볼 수 있다.

원문: Medium