환경 변수

최종 수정 : 2024-06-06

환경 변수(Environement Variable)

환경 변수는 프로그램에서 실행 환경에 따라 다른 값을 지정할 수 있는 변수이다. 꼭 웹 서비스가 아니더라도 데스크톱 프로그램이나 터미널에서도 이런 환경 변수를 많이 활용한다.

 

꼭 서버와 데이터베이스를 여러 개 쓰는 경우가 아니더라도 데이터베이스 주소와 같은 값을 소스코드에 그대로 쓰는 것은 위험하다. 이를 환경 변수로 사용하는 것이 좋은데, Node.js 환경에서는 이런 환경 변수들을 process.env라는 객체를 통해 참조할 수 있다.

 

Next.js에서 환경 변수 추가하기

Next.js에서 기본적으로 dotenv라는 라이브러리를 지원한다. 이 라이브러리는 .env 같은 이름의 파일에서 환경 변수들을 저장해 두면, Node.js 프로젝트를 실행할 때 환경 변수로 지정해 주는 라이브러리다. 이때 주의할 점은 .env 파일 같은 건 소스 코드에 포함시키면 안 된다는 점이다.

 

Next.js 프로젝트에서는 기본적으로 dotenv 설정이 되어 있어, .env.local 같은 파일을 추가하면 손쉽게 환경 변수를 추가할 수 있다.

// .env.local
MONGODB_URI=mongodb+srv://admin:blahblah@.clusterName.blahblah.mongodb.net/databaseName?retryWrites=true&w=majority

// pages/api/short-links/index.js
export default function handler(req, res) {
  const DB_URI = process.env.MONGODB_URI;
  // 데이터베이스 접속 ...
}

 

위와 같은 정보는 노출되면 안 되는 민간한 정보이다. 이런 정보의 노출을 막기 위해서 Next.js에서는 클라이언트 사이드에서 사용하는 환경 변수에 특별한 접두사(prefix)를 사용한다. NEXT_PUBLIC_ 이라고 이름을 붙이면 이 환경 변수는 클라이언트 사이드에서도 사용할 수 있다.

MONGODB_URI=mongodb+srv://admin:blahblah@cluster0.blahblah.mongodb.net/databaseName?retryWrites=true&w=majority
NEXT_PUBLIC_HOST=http://localhost:3000

export default Home() {
  // 페이지 컴포넌트에서는 아래와 같이 사용
  return (
    <>호스트 주소: {process.env.NEXT_PUBLIC_HOST}</>
  );