[Next] Next.js 에서 환경변수 사용해보기 (feat. Vercel)

Next.js에서의 환경 변수

프론트엔드 생태계에서 정말 많이 사용하는 React.js 라는 라이브러리가 있습니다.

React.js를 통해서 한 번 개발해보셨던 개발자분들은 아시겠지만 환경 변수를 추가하기 위해서 .env 로 시작되는 파일을 만들어 선언하고, 그 파일 안에 특정 정해진 네이밍 규칙을 통해 환경 변수를 선언합니다. 그리고 그걸 사용하죠

 

Next.js도 크게 다르지는 않습니다.
하지만 Next.js는 서버사이드에서 동작하는 특성을 가지기 때문에 이를 고려하지 않고 아무 네이밍을 통해 환경 변수를 선언하면 전혀 반응하지 않게 됩니다.

또한 Next.js는 자체적으로 환경 변수 접근이 가능하기 때문에 dotenv 와 같은 라이브러리를 설치할 필요가 없습니다. (설치하면 아마 정상적으로 동작이 되지 않을 것입니다.)

 

저도 처음으로 Next.js를 사용하여 사이드 프로젝트를 진행하는 도중 환경 변수가 인식이 안되는 일이 발생해서 의도치 않은 삽질을 했습니다.. 😅

 

❗️ 이 글은 개인적으로 학습한 정보와 지식, next.js Docs를 살펴보며 작성된 글입니다. 혹시 잘못된 부분이 있거나 수정사항이 있다면 말씀해주시면 반영하겠습니다. 🙏

.env

개발을 하다보면 한 번씩 보셨을 바로 .env 파일입니다. 이 env 파일 내부에 특정 API 주소라던지 DB 정보 등의 값을 환경 변수로 저장을 하게됩니다. 이건 next.js에서도 동일하게 적용됩니다.

만약 local, development, production 환경이 다르다면 이에 맞춰서 .env.local, .env.development, .env.production로 파일을 나누어서관리할 수 있습니다

 

여기서 중요한 점은 기본적으로 .env는 전역에 적용되는 환경변수이기 때문에 다른 환경을 사용하는 프로젝트라면 .env가 아닌 .env.local을 통해 환경 변수를 사용하면 훨씬 쉽게 접근이 가능합니다.
또한 만약 Vercel을 활용해서 배포를 한다면 .env.local에 있는 환경 변수에 접근이 가능하기 때문에 .env.local 로 생성해서 관리를 해주어야 합니다.

서버 사이드에서 환경 변수 접근

기본적으로 node.js 환경에서 접근하는 방식은 process.env.{환경변수}로 접근합니다.

이 방법이 next.js에서 서버 사이드에서 환경 변수에 접근하는 방법입니다.

DB_NAME=asdfzxcv
DB_PASSWORD=1234

예를 들면 위와 같은 환경 변수를 .env.local에 선언했다고 가정하면

const DB = connect({
    name: process.env.DB_NAME,
    password: process.env.DB_PASSWORD
})

위와 같이 접근해서 사용이 가능합니다.

클라이언트에서 환경 변수 접근

클라이언트에서는 접근 방법이 조금 다릅니다. React.js 에서 REACT_APP 과 같은 네이밍 규칙이 있듯이, Next.js에서도 NEXT_PUBLIC_ 이라는 네이밍 규칙이 존재합니다.

그래서 환경 변수를 브라우저에서 필요로 할 때는 NEXT_PUBLIC_ 을 붙인 후 선언을 해주어야 동작합니다.

NEXT_PUBLIC_API_KEY=1sdfasf31541241

위와 같은 외부 API KEY가 브라우저에서 사용할 때를 가정하면

return <API token={process.env.NEXT_PUBLIC_API_KEY} onClick={() => console.log('api')} />

브라우저에서 사용하게 될 때 해당 환경 변수를 가져와서 사용할 수 있게 됩니다.

Vercel에 배포할 때 환경 변수 접근

next.js는 간단하게 Vercel로 배포하는 경우가 많은데요, 막상 프로젝트를 배포하면 환경 변수들이 동작하지 않게 됩니다.

이는 Vercel에서 github에 .env에 있는 환경변수에 접근하지 않기 때문인데요

그렇게 때문에 배포 대상의 프로젝트에서 직접 세팅을 해줘야 합니다.

 

settings를 클릭하면 Environment Variables 탭이 보이고 이를 클릭하면 원하는 key와 value의 형태로 입력하여 등록할 수 있습니다.

이렇게 등록한 후 재배포를 진행하시면 정상적으로 동작할 것입니다. 😄