환경변수 설정 사용법[Next.js]

 

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

기본적으로 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')} />

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