[Next.js] Next.js에서 환경 변수 관리하기

환경 변수란? 🤔

환경 변수는 애플리케이션의 환경 설정 값을 담고 있는 변수로, API 키, 데이터베이스 URL, 실행 환경 등 민감한 정보를 외부에서 관리할 수 있도록 함. Next.js에서는 환경 변수를 쉽게 설정하고, 클라이언트와 서버 환경에 따라 안전하게 관리할 수 있음. 환경 변수는 코드에서 직접 관리하는 것보다 훨씬 안전하고 유연하게 설정할 수 있는 방법을 제공함.

Next.js에서 환경 변수를 사용하는 이유 🌟

• 보안 강화: 민감한 정보를 코드에 하드코딩하지 않고 환경 변수로 관리해 보안을 강화할 수 있음.
• 유연한 환경 관리: 개발, 테스트, 배포 환경에 따라 다른 변수를 사용할 수 있어 유연한 설정이 가능함.
• 실행 환경에 따른 분리: 클라이언트와 서버에서 각각 필요한 변수만을 분리하여 관리할 수 있음.

Next.js에서 환경 변수 설정하기 🛠️

Next.js는 기본적으로 .env 파일을 사용해 환경 변수를 설정할 수 있음. Next.js 프로젝트 루트 디렉터리에 .env 파일을 생성하고, 환경 변수 값을 추가하면 됨.

.env.local 파일 생성

# .env.local
NEXT_PUBLIC_API_URL=https://api.example.com
DATABASE_URL=postgres://user:password@host:5432/dbname
SECRET_KEY=mysecretkey

환경 변수 파일의 종류 📋

Next.js에서는 실행 환경에 따라 여러 종류의 환경 변수 파일을 지원함

.env.local: 로컬 개발 환경에서만 사용하는 환경 변수 파일. 다른 파일들보다 우선순위가 높음.
.env.development: next dev 명령어로 개발 환경에서 사용할 변수를 설정.
.env.production: next start 명령어로 프로덕션 환경에서 사용할 변수를 설정.
.env.test: 테스트 환경에서 사용할 변수를 설정.

.env 파일은 민감한 정보가 포함되므로, 일반적으로 .gitignore에 추가하여 Git에 포함되지 않도록 관리하는 것이 좋음.

환경 변수 사용 방법 🎯

Next.js에서는 process.env 객체를 통해 환경 변수를 사용할 수 있음. 그러나 클라이언트에서 사용할 수 있는 환경 변수는 NEXTPUBLIC 접두어로 시작해야 함.

클라이언트에서 사용하는 환경 변수

# .env.local
NEXT_PUBLIC_API_URL=https://api.example.com

export default function Home() {
  const apiUrl = process.env.NEXT_PUBLIC_API_URL;

  return <div>API URL: {apiUrl}</div>;
}

환경 변수의 설정 우선순위 🔄

Next.js에서는 여러 환경 변수 파일을 사용할 때 다음과 같은 우선순위에 따라 환경 변수가 적용됨:

1. .env.local
2. .env.development, .env.production, .env.test (실행 환경에 따라)
3. .env
   .env.local 파일이 항상 가장 높은 우선순위를 가지며, 특정 환경 설정이 필요할 때 다른 파일들을 통해 환경별로 구분하여 관리할 수 있음.