Next.js App Router 애플리케이션에서 환경 변수를 효과적으로 관리하는 것은 보안과 유연성을 위해 매우 중요합니다.
이 절에서는 환경 변수 설정 방법, 개발 및 프로덕션 환경에서의 처리, 그리고 관련 보안 고려사항에 대해 알아보겠습니다.
.env 파일 사용하기
Next.js는 .env
파일을 통해 환경 변수를 쉽게 관리할 수 있습니다. 프로젝트 루트에 다음과 같은 .env
파일들을 생성할 수 있습니다.
.env
: 모든 환경에서 사용되는 기본 환경 변수
.env.local
: 로컬 환경에서만 사용되는 환경 변수 (Git에 커밋되지 않음)
.env.development
: 개발 환경에서 사용되는 환경 변수
.env.production
: 프로덕션 환경에서 사용되는 환경 변수
예시
CSR 및 SSR 환경 변수 접근
Next.js는 환경 변수를 서버 사이드와 클라이언트 사이드에서 다르게 처리합니다.
- 서버 사이드에서는 모든 환경 변수에 접근할 수 있습니다.
- 클라이언트 사이드에서는
NEXT_PUBLIC_
접두사가 붙은 환경 변수만 접근 가능합니다.
Vercel에서의 환경 변수 설정
Vercel과 같은 호스팅 플랫폼에서는 대시보드를 통해 환경 변수를 쉽게 설정할 수 있습니다.
- Vercel 프로젝트 대시보드 접속
- 'Settings' > 'Environment Variables' 메뉴로 이동
- 키-값 쌍으로 환경 변수 추가
- 필요에 따라 특정 환경(개발, 프리뷰, 프로덕션)에만 적용되도록 설정
민감한 정보 관리
보안을 위해 다음 사항을 고려해야 합니다.
- API 키, 비밀 키 등 민감한 정보는 절대 버전 관리 시스템에 포함시키지 않습니다.
.gitignore
파일에 .env.local
과 같은 로컬 환경 파일을 추가합니다.
- 프로덕션 환경의 실제 값 대신 플레이스홀더를 사용합니다.
11장 API 라우트와의 연관성
환경 변수 설정은 11장에서 다룬 API 라우트와 밀접하게 연관됩니다.
API 라우트에서 환경 변수를 사용하여 데이터베이스 연결, 외부 API 인증 등을 처리할 수 있습니다.
예를 들어,
이렇게 환경 변수를 사용하는 것을 통해 애플리케이션의 설정을 코드와 분리하여 유연성과 보안성을 높일 수 있습니다.
실습 : 다중 환경 설정 구현
다음과 같이 개발, 스테이징, 프로덕션 환경에 따라 다른 설정을 적용하는 환경 변수 구조를 설계하고 구현해보세요.
1. 프로젝트 루트에 다음 파일들을 생성합니다.
.env.development
.env.staging
.env.production
2. 각 파일에 환경별 설정을 추가합니다.
3. next.config.js
파일에서 환경별 설정을 로드하는 로직을 추가합니다.
4. 애플리케이션에서 환경 변수를 사용하는 컴포넌트를 만듭니다.
5. 이 컴포넌트를 페이지에 추가하고, 다양한 환경에서 애플리케이션을 실행하여 환경 변수가 올바르게 적용되는지 확인합니다.
이 실습을 통해 다중 환경 설정을 구현하고, 각 환경에 맞는 설정을 효과적으로 관리하는 방법을 익힐 수 있습니다.
이는 실제 프로덕션 애플리케이션에서 매우 중요한 기술입니다.